Angularjs 我怎样才能在angular中摆脱$parent_Angularjs_Angularjs Directive_Angularjs Scope_Angular Ui

Angularjs 我怎样才能在angular中摆脱$parent

angularjs

Angularjs 我怎样才能在angular中摆脱$parent,angularjs,angularjs-directive,angularjs-scope,angular-ui,Angularjs,Angularjs Directive,Angularjs Scope,Angular Ui,这是我在控制器中有一个外部模板，包含ng include。它根据按钮的单击事件显示和隐藏。它按要求工作，但在ng include模板中使用$parent。还有其他更好的方法吗 Html 外部模板 <p>Some content here </p> <button data-ng-click="$parent.mainPage=true; $parent.otherContent=false">Back</button> 这里有一些内容返

这是

我在控制器中有一个外部模板，包含ng include。它根据按钮的单击事件显示和隐藏。它按要求工作，但在ng include模板中使用$parent。还有其他更好的方法吗

Html

外部模板

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

这里有一些内容

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

在主控制器中，在作用域上添加一个对象

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

然后在ng中单击“执行”：-

  <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>


返回
返回

选项2-使用功能

不要在视图上设置属性（从视图中抽象出太多逻辑是一个好主意），而是将控制器中的设置操作公开为一个可以从视图调用的函数，这在需要为该特定操作添加更多逻辑时也提供了可扩展性。在您的例子中，您甚至可以使用相同的函数，通过单击按钮和基于布尔参数翻转来调用它

选项3-使用控制器别名

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

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

在主控制器中，在作用域上添加一个对象

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

然后在ng中单击“执行”：-

  <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>


返回
返回

选项2-使用功能

选项3-使用控制器别名

控制器是避免此问题的推荐方法
当多个控制器应用于一个元素时，使用控制器as可以清楚地显示您在模板中访问的控制器。
如果将控制器编写为类，则可以更轻松地从控制器代码内部访问属性和方法，这些属性和方法将显示在作用域上。
因为绑定中总是有一个
，所以您不必担心原型继承掩蔽原语
<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>


你好{{main.name}}
链接到某些内容

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




控制器是避免此问题的推荐方法
当多个控制器应用于一个元素时，使用控制器as可以清楚地显示您在模板中访问的控制器。
如果将控制器编写为类，则可以更轻松地从控制器代码内部访问属性和方法，这些属性和方法将显示在作用域上。
因为绑定中总是有一个
，所以您不必担心原型继承掩蔽原语
<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>


你好{{main.name}}
链接到某些内容

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




实际上添加了一个函数来切换say toggleView并传入布尔值，只需相应地设置两个属性即可。。并在两个clicksok上调用相同的函数。看来控制器别名在这种情况下会很有帮助。@future是的。。这就是为什么我提供了我知道的所有三个选项：）我可能应该解释一下我的答案，在我的演示中粘贴代码。实际上添加了一个函数来切换say toggleView并传入布尔值，然后相应地设置2个属性。。并在两个clicksok上调用相同的函数。看来控制器别名在这种情况下会很有帮助。@future是的。。这就是为什么我提供了我知道的所有三个选项：）我可能应该解释我的答案，把代码粘贴到我的演示中。