将AngularJS范围变量从指令传递到控制器的最简单方法是什么？我所看到的所有示例似乎都很复杂，难道没有一种方法可以从指令访问控制器并设置其作用域变量之一吗？
2 回答
白衣非少年
TA贡献1155条经验 获得超0个赞
等到angular对变量进行求值
我对此有很多摆弄，即使使用"="范围中定义的变量也无法使其正常工作。这是三种解决方案，具体取决于您的情况。
解决方案1
我发现将变量传递给指令时，尚未对其进行角度求值。这意味着您可以访问它并在模板中使用它，但不能在链接或应用程序控制器函数中使用它，除非我们等待对其进行评估。
如果您的变量正在更改或通过请求获取，则应使用$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（请记住方括号！）：
<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）。
解决方案＃2
如果您的变量是在例如另一个控制器中创建的，但是只需要等到angular对它进行评估，然后再将其发送到应用控制器，我们就可以使用它$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;
});
}]);
这是html（无括号！）：
<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);
}
});
}]);
这是html（请记住方括号！）：
<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 关注
- 527 浏览
添加回答
举报
0/150
提交
取消