निम्नलिखित में चलाया जा सकता है डेमो यहाँ.
यह एचटीएमएल है:
<div ng-controller="MyCtrl">
<h2>Parent Scope</h2>
<input ng-model="foo"> <i>// Update to see how parent scope interacts with component scope</i>
<br><br>
<!-- attribute-foo binds to a DOM attribute which is always
a string. That is why we are wrapping it in curly braces so
that it can be interpolated.
-->
<my-component attribute-foo="{{foo}}" binding-foo="foo"
isolated-expression-foo="updateFoo(newFoo)" >
<h2>Attribute</h2>
<div>
<strong>get:</strong> {{isolatedAttributeFoo}}
</div>
<div>
<strong>set:</strong> <input ng-model="isolatedAttributeFoo">
<i>// This does not update the parent scope.</i>
</div>
<h2>Binding</h2>
<div>
<strong>get:</strong> {{isolatedBindingFoo}}
</div>
<div>
<strong>set:</strong> <input ng-model="isolatedBindingFoo">
<i>// This does update the parent scope.</i>
</div>
<h2>Expression</h2>
<div>
<input ng-model="isolatedFoo">
<button class="btn" ng-click="isolatedExpressionFoo({newFoo:isolatedFoo})">Submit</button>
<i>// And this calls a function on the parent scope.</i>
</div>
</my-component>
</div>
और यह जेएस है:
var myModule = angular.module("myModule", [])
.directive("myComponent", function () {
return {
restrict:"E",
scope:{
/* NOTE: Normally I would set my attributes and bindings
to be the same name but I wanted to delineate between
parent and isolated scope. */
isolatedAttributeFoo:"@attributeFoo",
isolatedBindingFoo:"=bindingFoo",
isolatedExpressionFoo:"&"
}
};
})
.controller("MyCtrl", ["$scope", function ($scope) {
$scope.foo = "Hello!";
$scope.updateFoo = function (newFoo) {
$scope.foo = newFoo;
}
}]);
यह तीन प्रकार के लिए एक अच्छा उदाहरण होना चाहिए exampleनिर्देशों में स्कोप बाइंडिंग। हालाँकि, यह तब काम नहीं करता जब मैं एक उच्च कोणीय संस्करण - (1.2.27) को स्विच करने का प्रयास करता हूं। मुझे निर्देश के भीतर विरासत में मिले दायरे की छाया पर संदेह है, लेकिन मैं इसके बारे में निश्चित नहीं हूं।
उत्तर:
उत्तर № 1 के लिए 1यह आपकी अपेक्षानुसार काम नहीं करेगा। पृथक क्षेत्र बनाए जाते हैं और उन्हें प्रदान किए जाते हैं Link, Compile, तथा Template एक निर्देश के अंश। हालाँकि, HTML के भीतर Element वास्तव में निर्देश का हिस्सा नहीं है। वे HTML भाग अभी भी माता-पिता के लिए बाध्य हैं $scope. यदि आपके पास अपने अलग-अलग स्कोप ऑब्जेक्ट्स को समान नाम देने की प्रवृत्ति है, तो आप शायद इसके खिलाफ काम कर रहे हैं $scope अनजाने में और कोई बुरा प्रभाव नहीं देखा। यदि आपका HTML a . में था Template के बजाय अंदर Element, यह अलग दायरे तक पहुंच जाएगा।
एक उदाहरण के रूप में, HTML में जो इनलाइन है Element, आप कॅाल कर सकते हैं updateFoo(), लेकिन अंदर से यह संभव नहीं Template