নির্দেশিকা থেকে নিয়ামকের দিকে কোনও কৌণিক জেএস স্কোপ ভেরিয়েবল পাস করার সহজতম উপায় কী? আমি যে উদাহরণগুলি দেখেছি তার সবগুলি এত জটিল বলে মনে হচ্ছে, কোনও নির্দেশিকা থেকে কোনও নিয়ামককে অ্যাক্সেস করার এবং এর একটি স্কোপ ভেরিয়েবল সেট করার কোনও উপায় নেই?
উত্তর:
2014/8/25 এ সম্পাদিত: এখানে আমি এটি কাঁটাচামচ করেছি।
ধন্যবাদ @ আনভারিক
এখানে জেএসফিডাল । আমি ভুলে গিয়েছিলাম যেখানে আমি এটি কাঁটাছি। তবে এটি একটি ভাল উদাহরণ যা আপনাকে = এবং @ এর মধ্যে পার্থক্য দেখায়
<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;
}
}]);
আমার এটি নিয়ে প্রচুর পরিমাণে ঝাঁকুনি লেগেছে, এবং এটিকে "="সুযোগের সাথে সংজ্ঞায়িত ভেরিয়েবলের সাথেও কাজ করতে পারা যায় না । আপনার পরিস্থিতির উপর নির্ভর করে এখানে তিনটি সমাধান's
আমি দেখতে পেলাম যে চলকটি নির্দেশের কাছে পাঠানো হওয়ার পরেও কৌনিক দ্বারা মূল্যায়ন করা হয়নি । এর অর্থ হ'ল আপনি এটি অ্যাক্সেস করতে এবং টেমপ্লেটে এটি ব্যবহার করতে পারবেন তবে লিঙ্কের মধ্যে বা অ্যাপ্লিকেশন নিয়ামক ক্রিয়াকলাপটি না থাকলে যতক্ষণ না আমরা এটির মূল্যায়নের জন্য অপেক্ষা করি।
আপনার যদি পরিবর্তনশীল পরিবর্তন , অথবা একটি অনুরোধ মাধ্যমে সংগৃহীত হয়, তাহলে আপনি ব্যবহার করা উচিত $observeবা $watch:
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)(অথবা যদি আপনার পরিবর্তনশীল পরিবর্তন না হয় তবে # 3 ) সমাধান ব্যবহার করুন।
যদি আপনার ভেরিয়েবলটি তৈরি করা হয় যেমন অন্য কোনও নিয়ামক , তবে অ্যাপ্লিকেশন নিয়ামককে প্রেরণের আগে কৌনিকটি এটির মূল্যায়ন না করা পর্যন্ত অপেক্ষা করা দরকার, আমরা চালানো $timeoutনা হওয়া পর্যন্ত অপেক্ষা করতে পারি $apply। এছাড়াও আমাদের $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>
যদি আপনার ভেরিয়েবল পরিবর্তন না হয় এবং আপনার এটির নির্দেশনায় আপনার মূল্যায়ন করতে হয় তবে আপনি $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
FOUC (আনস্টাইলযুক্ত সামগ্রীর ফ্ল্যাশ) ইস্যুটির জন্য রেফারেন্স: http://deansofer.com/posts/view/14/AngularJs- টিপস- এবং- কৌশলগুলি- UPDATED
আগ্রহীদের জন্য: এখানে কৌণিক জীবন চক্র সম্পর্কিত একটি নিবন্ধ রয়েছে
ng-if="someObject.someVariable"নির্দেশিকাতে একটি সরল (বা বৈশিষ্ট্য হিসাবে নির্দেশক সহ উপাদান) যথেষ্ট হয় - নির্দেশিক কিকগুলি কেবল পরে someObject.someVariableসংজ্ঞায়িত হয়।