可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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>

   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>

回答1:

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.

Demo - with function

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.

Demo - With Controller alias

回答2:

ControllerAs is the recommend way of avoiding this problem.

Using controller as makes it obvious which controller you are accessing in the template when multiple controllers apply to an element. If you are writing your controllers as classes you have easier access to the properties and methods, which will appear on the scope, from inside the controller code. Since there is always a . in the bindings, you don't have to worry about prototypal inheritance masking primitives.

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

Here are some resources for controller as: