Manière la plus facile de passer un AngularJS champ d'application variable de la directive de contrôleur?

Attendre jusqu'à ce angulaire a évalué la variable

J'ai eu beaucoup de bidouiller avec cela, et je ne pouvais pas le faire fonctionner, même avec la variable définie avec "=" dans le champ d'application. Voici trois solutions en fonction de votre situation.

---

Solution n ° 1

---

J'ai trouvé que la variable n'a pas été évaluée par angulaire encore quand il était passé à la directive. Cela signifie que vous pouvez y accéder et de l'utiliser dans le modèle, mais pas à l'intérieur du lien ou de l'application du contrôleur de fonction, sauf si nous attendre qu'il soit évalué.

Si votre variable est en train de changer, ou est récupérée à travers une demande, vous devez utiliser $observer ou $montre:

app.directive('yourDirective', function () {
    return {
        restrict: 'A',
        //NB: no isolated scope!!
        link: function (scope, element, attrs) {
            //observe changes in attribute - could also be scope.$watch
            attrs.$observe('yourDirective', function (value) {
                if (value) {
                    console.log(value);
                    //pass value to app controller
                    scope.variable = value;
                }
            });
        },
        //the variable is available in directive controller,
        //and can be fetched as done in link function
        controller: ['$scope', '$element', '$attrs',
            function ($scope, $element, $attrs) {
                //observe changes in attribute - could also be scope.$watch
                $attrs.$observe('yourDirective', function (value) {
                    if (value) {
                        console.log(value);
                        //pass value to app controller
                        $scope.variable = value;
                    }
                });
            }
        ]
    };
})
.controller('MyCtrl', ['$scope', function ($scope) {
    //variable passed to app controller
    $scope.$watch('variable', function (value) {
        if (value) {
            console.log(value);
        }
    });
}]);

Et voici le code html (n'oubliez pas les parenthèses!):

<div ng-controller="MyCtrl">
    <div your-directive="{{ someObject.someVariable }}"></div>
    <!-- use ng-bind in stead of {{ }}, when you can to avoids FOUC -->
    <div ng-bind="variable"></div>
</div>

Notez que vous ne devez pas définir la variable à "=" dans le champ, si vous utilisez le $observer fonction. Aussi, j'ai trouvé qu'il passe par des objets comme des chaînes de caractères, donc si vous êtes de passage des objets utilisation solution #2 ou scope.$watch(attrs.yourDirective, fn) (ou #3 si votre variable est de ne pas changer).

---

Solution n ° 2

---

Si votre variable est créée en, par exemple un autre contrôleur de, mais faut juste attendre jusqu'à ce angulaire a évalué avant de l'envoyer à l'application du contrôleur, nous pouvons utiliser $timeout attendre jusqu'à ce que le $apply a exécuter. Nous avons également besoin d'utiliser $émettent de l'envoyer à la portée parent contrôleur app (du fait de l'isolement de la portée de la directive):

app.directive('yourDirective', ['$timeout', function ($timeout) {
    return {
        restrict: 'A',
        //NB: isolated scope!!
        scope: {
            yourDirective: '='
        },
        link: function (scope, element, attrs) {
            //wait until after $apply
            $timeout(function(){
                console.log(scope.yourDirective);
                //use scope.$emit to pass it to controller
                scope.$emit('notification', scope.yourDirective);
            });
        },
        //the variable is available in directive controller,
        //and can be fetched as done in link function
        controller: [ '$scope', function ($scope) {
            //wait until after $apply
            $timeout(function(){
                console.log($scope.yourDirective);
                //use $scope.$emit to pass it to controller
                $scope.$emit('notification', scope.yourDirective);
            });
        }]
    };
}])
.controller('MyCtrl', ['$scope', function ($scope) {
    //variable passed to app controller
    $scope.$on('notification', function (evt, value) {
        console.log(value);
        $scope.variable = value;
    });
}]);

Et voici le code html (pas de parenthèses!):

<div ng-controller="MyCtrl">
    <div your-directive="someObject.someVariable"></div>
    <!-- use ng-bind in stead of {{ }}, when you can to avoids FOUC -->
    <div ng-bind="variable"></div>
</div>

---

Solution n ° 3

---

Si votre variable ne change pas et vous avez besoin de l'évaluer dans votre directive, vous pouvez utiliser le $eval fonction:

app.directive('yourDirective', function () {
    return {
        restrict: 'A',
        //NB: no isolated scope!!
        link: function (scope, element, attrs) {
            //executes the expression on the current scope returning the result
            //and adds it to the scope
            scope.variable = scope.$eval(attrs.yourDirective);
            console.log(scope.variable);

        },
        //the variable is available in directive controller,
        //and can be fetched as done in link function
        controller: ['$scope', '$element', '$attrs',
            function ($scope, $element, $attrs) {
                //executes the expression on the current scope returning the result
                //and adds it to the scope
                scope.variable = scope.$eval($attrs.yourDirective);
                console.log($scope.variable);
            }
         ]
    };
})
.controller('MyCtrl', ['$scope', function ($scope) {
    //variable passed to app controller
    $scope.$watch('variable', function (value) {
        if (value) {
            console.log(value);
        }
    });
}]);

Et voici le code html (n'oubliez pas les parenthèses!):

<div ng-controller="MyCtrl">
    <div your-directive="{{ someObject.someVariable }}"></div>
    <!-- use ng-bind instead of {{ }}, when you can to avoids FOUC -->
    <div ng-bind="variable"></div>
</div>

---

Aussi, jetez un oeil à cette réponse: https://stackoverflow.com/a/12372494/1008519

De référence pour FOUC (flash de non stylé contenu) question: http://deansofer.com/posts/view/14/AngularJs-Tips-and-Tricks-UPDATED

Pour les intéressés: voici un article sur l'angle du cycle de vie