不应该有AngularJS ngWith指令吗?
也许我很疯狂,或者也习惯了
KnockoutJS,但是我继续在文档中寻找一个ngWith指令来定义元素,控制器或包含(ngInclude)部分的范围。
例如: 我想编写一个增加MyItem的控件,如: MyModule.controller('MyItemCtrl',function($scope) { $scope.doSomethingToItem = function() { $scope.name = "bar"; }; }); 或者MyItem的视图/模板像: <div ng-controller="MyItemCtrl"> {{name}} <button ng-click="doSomethingWithItem()">Do Something</button> </div> 但是在这两种情况下,我想象我的范围是从我的模型MyItem原型继承。 但范围不是从模型继承! 这让我感到难过 相反,我的模型是范围上的属性。 在中继器的情况下: <div ng-repeat="item in list"> <div ng-controller="MyItemCtrl"> {{item.name}} <button ng-click="doSomethingWithItem()">Do Something</button> </div> </div> 这意味着我必须使用item.this或item.that而不是这个和那个。我必须记住哪些函数是模型的本机,哪些函数由控制器直接应用于范围。 如果我想要部分显示名称(愚蠢的例子,我知道,但你得到的想法): <h3>{{name}}</h3> 我必须写 <h3>{{item.name}}</h3> 然后确保模型总是项目。通常通过将它包装在一个指令中,简单地用一个item属性来定义一个范围。 我经常觉得我想做的只是: <div ng-include="'my/partial.html'" ng-with="item"></div> 要么 <div ng-repeat="list" ng-controller="MyItemCtrl"> {{name}} <button ng-click="doSomethingWithItem()">Do Something</button> </div> 有没有一些神奇的指令,我还没有找到?还是我完全错了,只是找麻烦? 谢谢。 编辑: 非常感谢Brandon Tilley解释使用示波器作为模型的危险。但是我仍然经常发现需要一些快速的声明范围操作,并希望使用ng-with指令。 举个例子,你有一个项目列表,当点击时,会显示所选项目的展开视图。你可能会写下如下: <ul> <li ng-repeat="item in items" ng-click="selection = item">{{item.minView}}</li> </ul> <div ng-controller="ItemController"> {{selection.maxView}} </div> 现在,您必须使用selection.property获取所选项目的属性,而不是我想要的项目:item.property。我也必须在ItemController中使用选择!使其完全结合这一观点。 我知道,在这个简单的例子中,我可以有一个包装控制器来使其工作,但它说明了一点。 我写了一个非常基本的指令: myApp.directive('with',['$parse','$log',function(parse,log) { return { scope: true,link: function(scope,el,attr) { var expression = attr.with; var parts = expression.split(' as '); if(parts.length != 2) { log.error("`with` directive expects expression in the form `String as String`"); return; } scope.$watch(parts[0],function(value) { scope[parts[1]] = value; },true); } } }]); 只需创建一个新的范围,将一个表达式解析为另一个值,即可 <ul> <li ng-repeat="item in items" ng-click="selection = item">{{item.minView}}</li> </ul> <div with="selection as item" ng-controller="ItemController"> {{item.maxView}} </div> 这似乎对我来说无限有用。 我在这里遗漏了什么吗?只是让自己的麻烦让人不知所措吗?
这是一个很好的问题。我可以看到这可能会来自另一个前端框架,但是在Angular中,范围引用了模型,并且您描述的语法是正常的。我个人喜欢将范围描述为更像
a view model。
AngularJS的作者Mi?koHevery在this video,starting at about the 30 minute mark and lasting about 3 minutes年做了很好的解释:
虽然可能会编写一个ngWith指令,这样你可以找到所需要的内容,但由于Angular使用了原型继承的范围,所以您可能会遇到Mi?ko在上述视频at 31:10中所描述的相同问题您正在更新父范围上的值,但实际上不是)。有关AngularJS中原型继承的更多细节,请查看AngularJS wiki上的优秀文章The Nuances of Scope Prototypal Inheritance。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |