將AngularJS范圍變量從指令傳遞到控制器的最簡(jiǎn)單方法是什么？我所看到的所有示例似乎都很復(fù)雜，難道沒(méi)有一種方法可以從指令訪問(wèn)控制器并設(shè)置其作用域變量之一嗎？
2 回答
白衣非少年
TA貢獻(xiàn)1155條經(jīng)驗(yàn) 獲得超0個(gè)贊
等到angular對(duì)變量進(jìn)行求值
我對(duì)此有很多擺弄，即使使用"="范圍中定義的變量也無(wú)法使其正常工作。這是三種解決方案，具體取決于您的情況。
解決方案1
我發(fā)現(xiàn)將變量傳遞給指令時(shí)，尚未對(duì)其進(jìn)行角度求值。這意味著您可以訪問(wèn)它并在模板中使用它，但不能在鏈接或應(yīng)用程序控制器函數(shù)中使用它，除非我們等待對(duì)其進(jìn)行評(píng)估。
如果您的變量正在更改或通過(guò)請(qǐng)求獲取，則應(yīng)使用$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);
? ? ? ? }
? ? });
}]);
這是html（請(qǐng)記住方括號(hào)?。?/p>
<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>
請(qǐng)注意"="，如果正在使用該$observe函數(shù)，則不應(yīng)在范圍內(nèi)將變量設(shè)置為。另外，我發(fā)現(xiàn)它以字符串形式傳遞對(duì)象，因此如果要傳遞對(duì)象，請(qǐng)使用解決方案＃2或scope.$watch(attrs.yourDirective, fn)（如果變量未更改，則使用解決方案＃3）。
解決方案＃2
如果您的變量是在例如另一個(gè)控制器中創(chuàng)建的，但是只需要等到angular對(duì)它進(jìn)行評(píng)估，然后再將其發(fā)送到應(yīng)用控制器，我們就可以使用它$timeout，直到$apply它運(yùn)行為止。另外，我們還需要使用$emit它來(lái)將其發(fā)送到父作用域應(yīng)用控制器（由于偽指令中的隔離作用域）：
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;
? ? });
}]);
這是html（無(wú)括號(hào)?。?/p>
<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
如果變量沒(méi)有變化，并且需要在指令中對(duì)其求值，則可以使用以下$eval函數(shù)：
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);
? ? ? ? }
? ? });
}]);
這是html（請(qǐng)記住方括號(hào)?。?/p>
<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>
- 2 回答
- 0 關(guān)注
- 658 瀏覽
添加回答
舉報(bào)
0/150
提交
取消