最简单的方法是将AngularJS范围变量从指令传递到控制器?
发布时间:2020-12-17 09:10:41 所属栏目:安全 来源:网络整理
导读:将AngularJS范围变量从指令传递到控制器的最简单方法是什么?我看到的所有例子看起来都很复杂,是不是有一种方法我可以从指令访问控制器,并设置其中一个范围变量? 在2014/8/25编辑: Here是我分手了。 感谢@anvarik。 这是JSFiddle.我忘了我在哪里分叉了。
将AngularJS范围变量从指令传递到控制器的最简单方法是什么?我看到的所有例子看起来都很复杂,是不是有一种方法我可以从指令访问控制器,并设置其中一个范围变量?
在2014/8/25编辑:
Here是我分手了。 感谢@anvarik。 这是JSFiddle.我忘了我在哪里分叉了。但这是一个很好的例子,显示了=和@ <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; } }]); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |