AngularJS：指令不能够访问隔离范围的对象 [英] AngularJS : Directive not able to access isolate scope objects

问题描述

我试图把一些默认值，在我的指导与隔离范围。基本上，我需要使用的范围对象做一些DOM操作时，我的指令的约束。下面是我的code：

I am trying to put some default values in my directive with Isolate scope. Basically, I need to do some DOM manipulations using the scope object when my directive is bound. Below is my code:

控制器：

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"
    };
});

自定义指令元素：

Custom Directive element:

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

现在的问题是，在试图访问内部指令的默认方法分离物的范围，我得到AAM未定义的值，而数据即将到来，越来越被绑定到DOM。我怎样才能访问隔离范围，广播听众和修改指令HTML模板？是否有另一种WASY处理这个？

Now, the issue is that while trying to access the isolate scope in the default method inside directive, I aam getting an undefined value whereas the data is coming and is getting bound to the DOM. How can I access the isolate scope in the broadcast listener and modify the directive template HTML? Is there another wasy for handling this?

推荐答案

现在的问题是：当时的角 不更新其绑定的呢。

The problem is: at that time angular does not update its bindings yet.

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

You should not access your variables like this, try to use angular js binding mechanism to bind it to view (by using $watch for example). Binding to parent scope variables means you're passive, just listen for changes and update other variables or your view. That's how we should work with angular.

如果你仍然需要访问它。你可以尝试用一种变通方法$ 超时

If you still need to access it. You could try a workaround using $timeout

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

演示

这是更好地使用$观看

 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>"
         };
     });

演示

通过使用$手表，你不需要在这种情况下播放您的活动。

By using $watch, you don't need to broadcast your event in this case.

这篇关于AngularJS：指令不能够访问隔离范围的对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！