प्रतीक्षा करें जब तक कोणीय चर का मूल्यांकन नहीं किया जाता है

मेरे पास इसके साथ बहुत झुकाव था, और इसे दायरे में "=" साथ परिभाषित चर के साथ भी काम करने के लिए नहीं मिला। आपकी स्थिति के आधार पर यहां तीन समाधान दिए गए हैं।

समाधान # 1

मैंने पाया कि परिवर्तनीय का मूल्यांकन कोणीय द्वारा तब तक नहीं किया गया था जब इसे निर्देश में पारित किया गया था। इसका अर्थ यह है कि आप इसे एक्सेस कर सकते हैं और टेम्पलेट में इसका उपयोग कर सकते हैं, लेकिन लिंक या ऐप कंट्रोलर फ़ंक्शन के अंदर नहीं जब तक कि हम इसका मूल्यांकन न करें।

यदि आपका चर बदल रहा है , या अनुरोध के माध्यम से लाया गया है, तो आपको $observe या $watch $observe उपयोग करना चाहिए:

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

और यहां एचटीएमएल है (ब्रैकेट याद रखें!):

<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>

ध्यान दें कि यदि आप $observe कार्य का उपयोग कर रहे हैं, तो आपको चर में "=" चर को सेट नहीं करना चाहिए। साथ ही, मैंने पाया कि यह ऑब्जेक्ट्स को तारों के रूप में पास करता है, इसलिए यदि आप ऑब्जेक्ट पास कर रहे हैं तो समाधान # 2 या scope.$watch(attrs.yourDirective, fn) उपयोग करें scope.$watch(attrs.yourDirective, fn) (, या # 3 यदि आपका चर बदल नहीं रहा है)।

समाधान # 2

यदि आपका वैरिएबल एक अन्य नियंत्रक में बनाया गया है , लेकिन ऐप नियंत्रक को भेजने से पहले कोणीय का मूल्यांकन करने तक बस प्रतीक्षा करने की आवश्यकता है, तो हम $apply होने तक प्रतीक्षा करने के लिए $timeout का उपयोग कर सकते हैं। इसके अलावा हमें इसे पेरेंट स्कोप ऐप कंट्रोलर (निर्देश में अलग-अलग दायरे के कारण) भेजने के लिए $emit का उपयोग करने की आवश्यकता है:

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

और यहां एचटीएमएल है (कोई ब्रैकेट नहीं!):

<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>

समाधान # 3

यदि आपका चर बदल नहीं रहा है और आपको इसे अपने निर्देश में मूल्यांकन करने की आवश्यकता है, तो आप $eval फ़ंक्शन का उपयोग कर सकते हैं:

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

और यहां एचटीएमएल है (ब्रैकेट याद रखें!):

<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>

इसके अलावा, इस उत्तर पर एक नज़र डालें: https://stackoverflow.com/a/12372494/1008519

एफओयूसी (अनस्टाइल सामग्री का फ्लैश) के लिए संदर्भ: http://deansofer.com/posts/view/14/AngularJs-Tips-and-Tricks-UPDATED अपडेट किया गया

रुचि के लिए: यहां कोणीय जीवन चक्र पर एक लेख है