Question

在我的web项目中，我正在编写一个指令，该指令必须对从服务器获取的数据做出反应。该指令必须尽可能通用，这是我通过控制器获取数据的原因。下一个代码是一个简化的伪示例，因为我希望它可以工作：

首先是我的控制员：

AnApp.controller("myController", function($scope, $http){
    $scope.theObject = {};

    $scope.initialize = function(){
        $http.get("url").success(function(returnObject){
            $scope.theObject = returnObject;
        });
    };
});

指令：

AnApp.directive("myDirective", function() {
    return {
        restrict: "A",
        scope: {
            theObject: '@'
        },
        link: function(scope, element, attributes) {
            //What do I have to do here to read my attributes when they change in the controller?
        }
});

和html：

<div data-ng-controller="myController">
    <div data-my-directive="" data-the-object="theObject"></div>
</div>

我想要做的是当对象发生变化时，链接功能会发生变化的反应。到目前为止，我尝试使用$ parse，$ observe，scope。$ watch但没有工作。他们都回馈了字符串＆＃34; theObject＆＃34;或未定义。从服务器检索对象或数组并将其放在范围内时，如何到达对象或数组？

Answer 1

双向=（而不是@）绑定可能适合您的目的，可以通过这种方式观察模型的更改。当您使用@时，它实际上会按原样绑定文本，您可能必须将其绑定为{{theObject}}并注意更改（但您可能必须将JSON解析为对象）。

AnApp.directive("myDirective", function() {
    return {
        restrict: "A",
        scope: {
            theObject: '='
        },
        link: function(scope, element, attributes) {
          var unwatcher =  scope.$watch('theObject', function(v){
                 if(angular.isDefined(v)){
                          unwatcher(); //May be unwatch if you do not want to watch it anymore. 
                        //got the value do something
                 }
                 //This will react to changes now.
            });
        }
});

如果只是一次初始化，那么你需要： - 你可以在手表被初始化后移除它......

如何在指令的链接函数中对绑定对象作出反应

1 个答案: