AngularJS : la Directive ne puissent pas accéder à isoler les objets de portée

Je suis en train de mettre certaines valeurs par défaut dans mon directive Isoler portée. En gros, j'ai besoin de faire quelques manipulations DOM à l'aide de la portée de l'objet lors de mon directive est liée. Ci-dessous mon code:

Contrôleur: 

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

Service: 

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

Directive:

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

Personnalisé Directive élément:

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

Maintenant, le problème est que lors de l'accès au isoler le champ d'application de la méthode par défaut à l'intérieur de la directive, je aam l'obtention d'une valeur indéfinie alors que les données sont à venir, et elle se lie vers les DOM. Comment puis-je accéder à l'isoler de la portée de la diffusion de l'écouteur et de modifier la directive modèle HTML? Est-il une autre wasy pour gérer cela?

Pourriez-vous créer un violon?

OriginalL'auteur Akhilesh Aggarwal | 2013-10-03

  1. 18

    Le problème est: à ce moment angulaire ne met pas à jour ses liaisons encore.

    Vous ne devez pas accéder à vos variables comme cela, essayez d'utiliser angular js mécanisme de liaison pour lier à vue (en utilisant $regarder par exemple). La liaison aux parents de la portée des variables signifie que vous êtes passive, il suffit d'écouter les changements et mise à jour autres variables ou votre point de vue. C'est comment de travailler avec des anguleux.

    Si vous avez encore besoin d'y accéder. Vous pourriez essayer une solution de contournement à l'aide de $délai d'attente

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

    DÉMO

    Il est préférable d'utiliser $regarder

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

    DÉMO

    En utilisant $watch, vous n'avez pas besoin de diffuser votre événement dans ce cas.

    Aggarwal: Vous devez utiliser $de regarder pour cela. Découvrez un problème similaire au stackoverflow.com/questions/19142409/...
    Pour: C'est encore mieux :). Une raison particulière de le "regarder" définition devrait être ajouté à l'intérieur de "lien". Je l'ai testé et il fonctionne sous "contrôleur".
    Aggarwal: Dans votre cas, je pense que vous devriez utiliser $regarder à l'intérieur de controller. En tant que contrôleur doit contenir votre logique et de la fonction de lien doit seulement se soucient de faire une connexion dynamique entre le modèle et la vue
    Selon l'angle de docs pour directives: "les Meilleures Pratiques: utilisation du contrôleur lorsque vous souhaitez exposer une API à d'autres directives. Sinon, utilisez le lien."
    fleurs: merci pour le commentaire.

    OriginalL'auteur Khanh TO

  2. 1

    Les plus susceptibles de l'isolé de la portée de la variable n'est pas disponible lorsque la directive du contrôleur de premier instancie mais probablement à sa disposition quand vous en avez besoin pour une suite d'événements tels que: dans une fonction liée à un ng-cliquez sur

    c'est juste une condition de concurrence et l'objet n'arrive pas exactement quand directive du contrôleur de charge

    OriginalL'auteur Benjamin McFerren