AngularJS：指令无法访问隔离范围对象答案

【问题标题】：AngularJS : Directive not able to access isolate scope objectsAngularJS：指令无法访问隔离范围对象
【发布时间】：2013-10-03 07:35:49
【问题描述】：

我试图在我的指令中使用隔离范围放置一些默认值。基本上，当我的指令被绑定时，我需要使用范围对象进行一些 DOM 操作。以下是我的代码：

控制器：

angular.module('ctrl').controller('TempCtrl', function($scope, $location, $window, $timeout, RestService, CommonSerivce) {

$scope.showAppEditWindow = function() {
    //Binding the directive isolate scope objects with parent scope objects
    $scope.asAppObj = $scope.appObj;
    $scope.asAppSubs = $scope.appSubscriptions;

    //Making Initial Settings
    CommonSerivce.broadcastFunction('doDirectiveBroadcast', "");
};

服务：

angular.module('Services').factory('CommonSerivce', function ($rootScope) {
return {       
    broadcastFunction: function(listener, args) {
        $rootScope.$broadcast(listener, args);
    }
};

指令：

angular.module('directives').directive('tempDirective', function() {
return {
    restrict : 'E',
    scope:{
        appObj:'=asAppObj',
        appSubs: '=asAppSubs'
    },
    link : function(scope, element, attrs) {},
    controller : function ($scope,Services,CommonSerivce) {         
        //Broadcast Listener 
        $scope.$on('doDirectiveBroadcast', function (event, args) {
            $scope.setDefaults();
        });

        $scope.setDefaults = function() {
            //Setting Default Value
            alert(JSON.stringify($scope.appSubs)); //Coming as undefined            
        };
    },
    templateUrl:"../template.html"
    };
});

自定义指令元素：

<temp-directive as-app-obj="asAppObj" as-app-subs="asAppSubs" />

现在，问题是，在尝试访问指令内部默认方法中的隔离范围时，我得到了一个未定义的值，而数据即将到来并绑定到 DOM。如何访问广播侦听器中的隔离范围并修改指令模板 HTML？是否还有其他方法可以处理此问题？

【问题讨论】：

你能做一个小提琴吗？

标签： angularjs angularjs-directive angularjs-scope angularjs-service

【解决方案1】：

问题是：当时 angular还没有更新它的绑定。

您不应该像这样访问您的变量，尝试使用 Angular js 绑定机制将其绑定到 view（例如使用 $watch）。绑定到父范围变量意味着您是被动，只需侦听更改并更新其他变量或你的看法。这就是我们应该使用 Angular 的方式。

如果您仍然需要访问它。您可以尝试使用 $timeout

$scope.setDefaults = function() {
    $timeout(function () {
        alert(JSON.stringify($scope.appSubs)); //Coming as undefined  
    },0);          
};

DEMO

最好用$watch

 angular.module('ctrl', []).controller('TempCtrl', function ($scope, $location, $rootScope) {
         $scope.appSubscriptions = "Subscriptions";
         $scope.appObj = "Objs";
         $scope.showAppEditWindow = function () {
             //Binding the directive isolate scope objects with parent scope objects
             $scope.asAppObj = $scope.appObj;
             $scope.asAppSubs = $scope.appSubscriptions;

         };
     });

     angular.module('ctrl').directive('tempDirective', function () {
         return {
             restrict: 'E',
             replace: true,
             scope: {
                 appObj: '=asAppObj',
                 appSubs: '=asAppSubs'
             },
             link: function (scope, element, attrs) {

             },
             controller: function ($scope, $timeout) {
                 $scope.$watch("appSubs",function(newValue,OldValue,scope){
                     if (newValue){ 
                         alert(JSON.stringify(newValue)); 
                     }
                 });
             },
             template: "<div>{{appSubs}}</div>"
         };
     });

DEMO

通过使用 $watch，您无需在这种情况下广播您的活动。

【讨论】：

@Akhilesh Aggarwal：您应该为此使用 $watch。在stackoverflow.com/questions/19142409/… 上查看类似问题
@Khank To：这更好:)。应在“链接”中添加“监视”定义的任何特定原因。我测试过，它也在“控制器”下工作。
@Akhilesh Aggarwal：在你的情况下，我认为你应该在controller 中使用 $watch。由于控制器应该包含您的逻辑和链接功能应该只关心在模型和视图之间建立动态连接
@KhanhTO：根据directives 的角度文档：“最佳实践：当您想将 API 公开给其他指令时使用控制器。否则使用链接。”

【解决方案2】：

当指令的控制器第一次实例化时，隔离范围变量很可能不可用，但当您需要它用于以下事件时，它可能可用，例如：在绑定到 ng-click 的函数内

它只是一个竞争条件，当指令的控制器加载时，对象并没有准确到达

【讨论】：