Question

我有一个加载图像数据模板的指令。

问题是，在调用检索img信息的服务后，它不会更新图像日期。

这是我的代码：

控制器方法：

$scope.watchImage = function(file_id){
        FileService.getFile(file_id)
        .then(
            function(data){
                if(data.file){
                    $scope.img = data.file; 
                    console.log('Service called');
                }
            }
        );
    }

指令：

app.directive('imageDetails', function() {
    return {
        scope: {
            img: '='
        },
        restrict: 'E',
        link: function($scope, element, attrs){
            $scope.$watch(function() { 
                return $scope.img; 
            }, function() { 
                console.log($scope.img); 
            });
        },
        template: 'IMG: {img}'
    };
});

HTML：

<div class="ui container">
        <h2 class="ui dividing header">Images</h2>
    </div>

    <div ng-view></div>

    <image-details img="img"></image-details>
</div>

记录结果：

undefined
Service called

知道怎么解决吗？

谢谢！

Answer 1

首先，感谢大家的回复。所有这些都帮助我解决了问题。

最后这是我的工作代码。

<强>指令：

app.directive('imageDetails', function() {
    return {
        scope: {
            img: '='
        },
        restrict: 'E',
        template: 'IMG: {{img}}'
    };
});

我将指令添加到我的模板中（我在ngview之外添加它）。

Answer 2

你在模板和链接功能方面有一些错误。

＆＃13;

var app = angular.module('myApp', []);
app.controller('mainCtrl', function ($scope) {
  $scope.img = {id: 1, title: "avatar.jpeg", slug: "avatar.jpeg", filesize: 24875, created_at: "2016-03-10 11:44:59"};
               
    })

app.directive('imageDetails', function() {
    return {
        scope: {
            img: '='
        },
        restrict: 'E',
        link: function(scope, element, attrs){
            scope.$evalAsync(function() {
           return scope.img; 
       });

        },
        template: 'IMG: {{img}}'
    };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="mainCtrl">


    <image-details img="img"></image-details>
</div>

＆＃13;

Answer 3

我认为你的指示应该是：

app.directive('imageDetails', function() {
return {
    scope: {
        img: '='
    },
    restrict: 'E',
    link: function(scope, element, attrs){
        scope.$watch('img',function(image) { 
            return image; 
        }, function() { 
            console.log(image); 
        });
    },
    template: 'IMG: {img}'
};
});

Answer 4

首先使用控制器而不是链接功能，因为您不需要它。对于像1.5这样的简单组件，不推荐使用链接功能。

然后，为了使用$ watch，你需要指定你想要观看的变量，并且只需要在变化后做什么。

$watch('varToWatch', function(newValue) {...});

也就是说，如果使用控制器而不是链接功能，则可能还使用“Controller as”语法。使用它时，需要指定要监视的变量的“视图名称”。例如：

app.directive('imageDetails', function() {
return {
    scope: {
        img: '='
    },
    restrict: 'E',
    controllerAs: '$ctrl',
    controller: function($scope){
        $scope.$watch('$ctrl.img', function(newVal) { 
            console.log(newVal);
            // if you want you can assign new value to your variable
            // $scope.img = newVal;
        });
    },
    template: 'IMG: {img}'
};

}）;

试试并告诉我它是否适合你;）

Answer 5

这是范围在模块外部受影响的明显情况。对于这些情况，生命周期不会像您期望的那样进行范围的摘要。

当您想要通知您的应用程序范围已在指令中更改时，您必须手动$ digest或$ apply

$ scope。$ watch在指令服务调用后不会更新

5 个答案: