- 首页
- 其他开发
- 将 AngularJS 范围变量从指令传递到控制器的最简单方法?
将 AngularJS 范围变量从指令传递到控制器的最简单方法?
[英] Easiest way to pass an AngularJS scope variable from directive to controller?
本文介绍了将 AngularJS 范围变量从指令传递到控制器的最简单方法?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
将 AngularJS 范围变量从指令传递到控制器的最简单方法是什么?我见过的所有示例看起来都很复杂，难道没有一种方法可以从指令访问控制器，并设置其中一个作用域变量吗?
解决方案
Edited on 2014/8/25:这里是我分叉的地方.
谢谢@anvarik.
这是 JSFiddle.我忘了我在哪里分叉了这个.但这是一个很好的例子，向您展示 = 和 @
之间的区别
<h2>父范围</h2><输入 ng-model="foo"><i>//更新以查看父作用域如何与组件作用域交互</i><br><br><!-- attribute-foo 绑定到始终为的 DOM 属性一个字符串.这就是为什么我们将它包裹在花括号中它可以被插值.--><my-component attribute-foo="{{foo}}" binding-foo="foo"隔离表达式 foo="updateFoo(newFoo)" ><h2>属性</h2><div><strong>获取:</strong>{{isolatedAttributeFoo}}
<div><strong>设置:</strong><输入 ng-model="isolatedAttributeFoo"><i>//这不会更新父作用域.</i>
<h2>结合</h2><div><strong>获取:</strong>{{isolatedBindingFoo}}
<div><strong>设置:</strong><输入 ng-model="isolatedBindingFoo"><i>//这确实更新了父作用域.</i>
<h2>表达式</h2><div><输入 ng-model="isolatedFoo"><button class="btn" ng-click="isolatedExpressionFoo({newFoo:isolatedFoo})">提交</button><i>//这会调用父作用域上的函数.</i>
</my-component>
var myModule = angular.module('myModule', []).directive('myComponent', function () {返回 {限制:'E'，范围:{/* 注意:通常我会设置我的属性和绑定同名但我想区分父作用域和隔离作用域.*/isolatedAttributeFoo:'@attributeFoo',isolatedBindingFoo:'=bindingFoo',isolatedExpressionFoo:'&'}};}).controller('MyCtrl', ['$scope', function ($scope) {$scope.foo = '你好！';$scope.updateFoo = 函数 (newFoo) {$scope.foo = newFoo;}}]);
What is the easiest way to pass an AngularJS scope variable from directive to controller? All of the examples that I've seen seem so complex, isn't there a way I can access a controller from a directive, and set one of it's scope variables?
解决方案
Edited on 2014/8/25:
Here was where I forked it.
Thanks @anvarik.
Here is the JSFiddle. I forgot where I forked this. But this is a good example showing you the difference between = and @
<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;
}
}]);
这篇关于将 AngularJS 范围变量从指令传递到控制器的最简单方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
