我怎样才能在角摆脱$父 [英] How can i get rid of $parent in angular
问题描述
下面的 Plunker
我在与控制器内的外部模板纳克-包括。它是显示和隐藏基于Button.It的单击事件正在按所需但是$父NG-包括Template.Is有这样做的任何其他更好的办法？
HTML
＆LT;机身NG控制器=MainCtrl＆GT;
＆LT; DIV数据-NG-包括='terms.html'数据-NG-秀=otherContent＆GT;＆LT; / DIV＆GT;
＆LT; DIV NG秀=炫魅＆GT;
＆LT; P＆GT;您好{{名}}＆LT;！/ P＆GT;
＆LT;按键数据-NG-点击=炫魅= FALSE; otherContent =真正的＆GT;链接到一些内容＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
JS
VAR应用= angular.module（'plunker'，[]）;
app.controller（'MainCtrl'，函数（$范围）{
$ scope.name ='世界';
$ scope.mainPage =真;
}）;
外部模板
＆LT; P＆gt;此处有些内容与LT; / P＆GT;
＆LT;按键数据-NG-点击=$ parent.mainPage = TRUE; $ parent.otherContent =假＆GT;返回＆LT; /按钮＆GT;
选项1 - 在作用域的对象上设置属性
在主控制器上的范围添加对象
app.controller（'MainCtrl'，函数（$范围）{
$ scope.name ='世界';
$ scope.page = {炫魅：真正};
}）;
和在NG-点击做到： -
＆LT; DIV数据-NG-包括='terms.html'数据-NG-秀=page.otherContent＆GT;＆LT; / DIV＆GT;
＆LT; DIV NG秀=page.mainPage＆GT;
＆LT;按键数据-NG-点击=page.mainPage = TRUE; page.otherContent =假＆GT;返回＆LT; /按钮＆GT; ＆所述;！ - - ＆GT; ＆LT;按键数据-NG-点击=page.mainPage = TRUE; page.otherContent =假＆GT;返回＆LT; /按钮＆GT;
选项2 - 使用功能
而不是在视图中设置属性（这是反正一个好主意，从视图中抽象出太多逻辑），不要在暴露，可以从该视图，这也给被调用的函数控制器的操作集当你需要添加更多的逻辑，针对该特殊操作的可扩展性。而在你的情况下，你甚至可以使用相同的功能，无论从点击按钮调用它，翻转基于布尔参数。
选项3 - 使用控制器别名
使用的控制器，它只不过是控制器的实例设置为与所述属性名称相同提供的别名的范围的性质的别名。这将确保你实施使用点符号在你的绑定，并确保你与控制器别名子作用域访问属性继承自父对象引用，并提出更改将反映两种方式。具有角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.
这篇关于我怎样才能在角摆脱$父的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
