angularjs एक कोणीय जेएस स्कोप वैरिएबल को निर्देशक से नियंत्रक को पास करने का सबसे आसान तरीका?
प्रतीक्षा करें जब तक कोणीय चर का मूल्यांकन नहीं किया जाता है
मेरे पास इसके साथ बहुत झुकाव था, और इसे दायरे में "="
साथ परिभाषित चर के साथ भी काम करने के लिए नहीं मिला। आपकी स्थिति के आधार पर यहां तीन समाधान दिए गए हैं।
समाधान # 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 अपडेट किया गया
रुचि के लिए: यहां कोणीय जीवन चक्र पर एक लेख है
निर्देशक से नियंत्रक से AngularJS स्कोप वैरिएबल पास करने का सबसे आसान तरीका क्या है? मेरे द्वारा देखे गए सभी उदाहरण इतने जटिल लगते हैं, क्या कोई तरीका नहीं है कि मैं एक निर्देशक से निर्देशक तक पहुंच सकता हूं, और इसके किसी भी दायरे चर सेट कर सकता हूं?