9

Próbuję wprowadzić niektóre wartości domyślne w mojej dyrektywie z zakresem izolatu. Zasadniczo, potrzebuję wykonać niektóre manipulacje DOM przy użyciu obiektu zasięgu, gdy moja dyrektywa jest związana. Poniżej jest mój kod:AngularJS: Dyrektywa nie jest w stanie uzyskać dostępu obiektów izolowanych

Kontroler:

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

Usługa:

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

dyrektywa:

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

dyrektywa Niestandardowe Element:

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

Problem polega na tym, że próbując uzyskać dostęp do zakresu izolatu w domyślnej metodzie wewnątrz dyrektywy, otrzymuję niezdefiniowaną wartość, podczas gdy dane przychodzą i są wiązane z DOM. Jak uzyskać dostęp do zakresu izolatu w odbiorniku broadcast i zmodyfikować HTML szablonu dyrektywy? Czy istnieje inny sposób na radzenie sobie z tym?

+0

Czy możesz stworzyć skrzypce? – AlwaysALearner

Odpowiedz

18

Problem polega na tym, że w tym czasie kątowe nie aktualizuje jeszcze swoich powiązań.

Nie należy uzyskać dostęp do zmiennych tak, spróbuj użyć kątowych js mechanizm wiązania powiązać go z widzenia (przy użyciu $ zegarek na przykład). Wiązanie z dominujących zmiennych zakresu oznacza, że ​​jesteś pasywny, tylko słuchać na zmiany i zaktualizować inne zmienne lub Twój widok. Tak powinniśmy pracować z kątem.

Jeśli nadal potrzebujesz do niego dostępu. Można spróbować obejście użyciu $ timeout

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

DEMO

Lepiej użyć $ oglądać

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

Korzystając $ zegarek, nie trzeba nadawać Twoje wydarzenie w tym przypadku.

+3

@Akhilesh Aggarwal: Powinieneś użyć $ watch. Sprawdź podobny problem na http://stackoverflow.com/questions/19142409/angular-directives-and-scope/19204970#19204970 –

+1

@Khank To: To jest jeszcze lepsze :).Każdy szczególny powód, dla którego definicja "zegarka" powinna zostać dodana w "linku". Testowałem i działa również pod "kontroler". –

+0

@Akhilesh Aggarwal: W twoim przypadku, powinieneś użyć $ watch wewnątrz 'kontrolera'. Ponieważ kontroler powinien zawierać logikę, a funkcja łącza powinna dbać tylko o dynamiczne połączenie modelu z widokiem: –

1

Najprawdopodobniej zmienna izolowane zakres nie jest dostępna, gdy kontrolera pierwszego instancję dyrektywy, ale prawdopodobnie jest on dostępny, gdy jest to potrzebne do następnego zdarzenia, takie jak: obrębie funkcji, związanej z ng kliknij

jej tylko stan wyścigu i obiekt nie dociera dokładnie wtedy, gdy sterownik dyrektywy ładuje się

Powiązane problemy