AngularJS: Chỉ thị không thể truy cập đối tượng phạm vi cô lập

Question

Tôi đang cố gắng đặt một số giá trị mặc định trong chỉ thị của mình với phạm vi Cô lập. Về cơ bản, tôi cần phải thực hiện một số thao tác DOM bằng cách sử dụng đối tượng phạm vi khi chỉ thị của tôi bị ràng buộc. Dưới đây là mã của tôi:

Bộ điều khiển:

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

dịch vụ:

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

Chỉ thị:

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

Tuỳ chỉnh Chỉ thị yếu tố:

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

Bây giờ, vấn đề là khi cố gắng truy cập vào phạm vi cô lập trong phương thức mặc định bên trong chỉ thị, thì tôi nhận được một giá trị không xác định trong khi dữ liệu đang đến và đang bị ràng buộc với DOM. Làm thế nào tôi có thể truy cập phạm vi cách ly trong trình nghe phát sóng và sửa đổi HTML mẫu chỉ thị? Có cách nào khác để xử lý điều này?

Answer 1

Vấn đề là: tại thời điểm đó góc không cập nhật các ràng buộc của nó.

Bạn không nên truy cập các biến của bạn như thế này, cố gắng sử dụng js góc ràng buộc cơ chế để ràng buộc nó để xem (bằng cách sử dụng $ đồng hồ chẳng hạn). Ràng buộc để biến phạm vi cha mẹ có nghĩa là bạn đang thụ động, chỉ cần lắng nghe những thay đổi và cập nhật biến khác hoặc xem bạn. Đó là cách chúng ta nên làm việc với góc cạnh.

Nếu bạn vẫn cần truy cập. Bạn có thể thử một workaround sử dụng $ timeout

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

DEMO

Nó tốt hơn để sử dụng $ xem

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

Bằng cách sử dụng $ xem, bạn không cần phải phát sóng sự kiện của bạn trong trường hợp này.

Answer 2

Nhiều khả năng biến phạm vi cô lập không có sẵn khi điều khiển instantiates đầu tiên trên thị nhưng có lẽ nó có sẵn khi bạn cần nó cho một sự kiện sau đây như: trong vòng một chức năng liên kết với một ng-click

của nó chỉ là một điều kiện chủng tộc và đối tượng không đến chính xác khi bộ điều khiển của chỉ thị tải