Question

我在一个带有ng-include的控制器中有一个外部模板。它基于Button的点击事件显示和隐藏。它正在按要求工作但在ng-include Template中有$ parent。还有其他更好的方法吗？

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;
});

外部模板

  <p>Some content here </p>
 <button data-ng-click="$parent.mainPage=true; $parent.otherContent=false">Back</button>

Answer 1

选项1 - 设置范围内对象的属性

在主控制器中，在范围上添加一个对象。

app.controller('MainCtrl', function($scope) {
   $scope.name = 'World';
   $scope.page={mainPage:true};
});

并在ng-click中执行： -

  <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

选项2 - 使用功能

而不是在视图上设置属性（从视图中抽象出过多的逻辑总是一个好主意），将控制器中的集合操作暴露为可以从视图调用的函数，这也给出了当您需要为该特定操作添加更多逻辑时的可扩展性。在你的情况下，你甚至可以使用相同的函数，并从按钮点击调用它，并根据布尔参数翻转。

<强> Demo - with function

选项3 - 使用控制器别名

使用控制器的别名，它只是控制器的实例，被设置为作用域上的属性，其属性名称与提供的别名相同。这将确保您强制在绑定中使用点表示法，并确保您在具有控制器别名的子作用域上访问的属性从其父作为对象引用继承，并且所做的更改将以两种方式反映。对于angular 1.3，还可以通过在指令配置中设置 bindToController 属性来自动设置隔离范围指令属性绑定到控制器实例。

<强> Demo - With Controller alias

Answer 2

ControllerAs是避免此问题的推荐方法。

当多个控制器应用于元素时，使用控制器可以明显地在模板中访问哪个控制器。如果您将控制器编写为类，则可以从控制器代码内部更轻松地访问将在范围内显示的属性和方法。由于绑定中始终存在.，因此您不必担心原型继承屏蔽原语。

<body ng-controller="MainCtrl as main">
    <div data-ng-include="'terms.html'" data-ng-show="main.otherContent"></div>
    <div ng-show="mainPage">
        <p>Hello {{main.name}}!</p>
        <button data-ng-click="main.mainPage=false; main.otherContent=true">Link to some Content</button>
    </div>
</body>

以下是控制器的一些资源：

我怎样才能摆脱角度的$ parent

2 个答案: