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

我想在隔离范围的指令中加入一些默认值。基本上，当我的指令被绑定时，我需要使用scope对象做一些DOM操作。下面是我的代码：AngularJS：指令无法访问隔离范围对象

控制器：

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" />

现在，问题是，在试图访问内部指令的默认方法的分离范围，我AAM得到一个未定义的值，而数据即将到来，越来越被绑定到DOM。如何访问广播监听器中的隔离范围并修改指令模板HTML？处理这个问题还有另一个问题吗？

来源

2013-10-03 Akhilesh Aggarwal

你能创建一个小提琴并不完全到达？ – AlwaysALearner

的问题是：当时的角度不更新其绑定尚未。

你不应该像这样访问你的变量，尝试（通过使用$手表为例）使用角度JS绑定机制，将其绑定到视图。绑定到父作用域变量意味着你被动，只听更改和更新其他变量或视图。这就是我们应该如何使用角度。

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

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

DEMO

这是更好地使用$看

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

通过使用$腕表尝试一种解决方法，你不需要广播你的事件在这种情况下。

来源

2013-10-05 05:35:45

@Akhilesh Aggarwal：你应该为此使用$ watch。看看在http://stackoverflow.com/questions/19142409/angular-directives-and-scope/19204970#19204970 –

@Khank遇到同样的问题：这是更好:)。'watch'定义应该添加到'link'中的任何特殊原因。我测试过，它也在'控制器'下工作。 –

@Akhilesh Aggarwal：就你而言，我认为你应该在'controller'中使用$ watch。由于控制器应该包含您的逻辑和链接功能，只应该关心在模型和视图之间进行动态连接 –

最有可能的隔离范围变量不可用时，该指令的控制器首先实例，但可能其可用的，当你需要它的一个下面的事件，如：绑定到一个函数中NG单击

它只是一个竞争条件和对象时，指令的控制器负载

来源

2015-06-16 18:03:04

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

回答

相关问题