我怎样才能摆脱 $parent 的角度 [英] How can i get rid of $parent in angular
问题描述
这里是 Plunker
我在带有 ng-include 的控制器中有一个外部模板.它根据 Button 的点击事件显示和隐藏.它按要求工作，但在 ng-include 模板中使用 $parent.还有其他更好的方法吗?
HTML
<div data-ng-include="'terms.html'" data-ng-show="otherContent"></div><div ng-show="mainPage"><p>你好{{name}}！</p><button data-ng-click="mainPage=false; otherContent=true">链接到一些内容</button>JS
var app = angular.module('plunker', []);app.controller('MainCtrl', function($scope) {$scope.name = '世界';$scope.mainPage=true;});外部模板
<p>这里有一些内容</p><button data-ng-click="$parent.mainPage=true; $parent.otherContent=false">返回</button>Option1 - 设置范围内对象的属性
在主控制器的作用域上添加一个对象.
app.controller('MainCtrl', function($scope) {$scope.name = '世界';$scope.page={mainPage:true};});并在 ng-click 中执行:-
选项 2 - 使用函数
不要在视图上设置属性(从视图中抽象出太多逻辑是个好主意)，而是在控制器中执行设置操作作为可以从视图调用的函数，这也给出当您需要为该特定操作添加更多逻辑时的可扩展性.在您的情况下，您甚至可以使用相同的函数，并根据布尔参数从按钮点击和翻转中调用它.
选项 3 - 使用控制器别名
为控制器使用别名，这只不过是控制器的实例被设置为范围上的属性，其属性名称与提供的别名相同.这将确保您强制在绑定中使用点表示法，并确保您在具有控制器别名的子作用域上访问的属性作为对象引用从其父级继承，并且所做的更改以两种方式反映.使用 angular 1.3，也可以通过设置 bindToController 指令配置中的属性.
Here's Plunker
I have an external template within in a controller with ng-include. It is shown and hidden based on click event of Button.It is working as required but with $parent in ng-include Template.Is there any other better way of doing this ?
Html
<body ng-controller="MainCtrl">
<div data-ng-include="'terms.html'" data-ng-show="otherContent"></div>
<div ng-show="mainPage">
<p>Hello {{name}}!</p>
<button data-ng-click="mainPage=false; otherContent=true">Link to some Content</button>
</div>
</body>
JS
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.mainPage=true;
});
External Template
<p>Some content here </p>
<button data-ng-click="$parent.mainPage=true; $parent.otherContent=false">Back</button>
解决方案 Option1 - Set property on an object in the scope
In the main controller add an object on the scope.
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.page={mainPage:true};
});
and in the ng-click do:-
<div data-ng-include="'terms.html'" data-ng-show="page.otherContent"></div>
<div ng-show="page.mainPage">
<button data-ng-click="page.mainPage=true; page.otherContent=false">Back</button>
<!-- -->
<button data-ng-click="page.mainPage=true; page.otherContent=false">Back</button>
Demo - setting property on an object in the scope
Option2 - Use function
Instead of setting properties on the view (Which is anyways a good idea to abstract out too much logic from the view), Do your set operations in the controller exposed as a function that can be invoked from the view, which also gives extensibility when you need to add more logic for that particular action. And in your case you could even use the same function and call it from both the button clicks and flipped based on a boolean argument.
Option3 - Use Controller Alias
Using an alias for the controller, which is nothing but instance of the controller is set as a property on the scope with the property name same as the alias provided. This will make sure you are enforce to use dot notation in your bindings and makes sure the properties you access on the child scopes with the controller alias are inherited as object reference from its parent and changes made are reflected both ways. With angular 1.3, it is also possibly to set the isolate scoped directive properties are bound to the controller instance automatically by setting bindToController property in the directive configuration.
这篇关于我怎样才能摆脱 $parent 的角度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
