在不使用$ Rootscope的情况下，使用角路由更改控制器时如何更改范围

Question

https://plnkr.co/edit/u9tl95qs5qs5 agspu6nnwvd/

我能够使用TemplateUrl更改NG-视图。但是，当我使用每个新控制器中的$ scope.msg更新时，它不会更新{{msg}}。

是否可以在不使用$ Rootscope的情况下进行更新。由于我听说$ Rootscope练习不好。

我想我没有注册控制器？我是Angular的新手。

我不知道如何使用服务

in index.html

app.controller("redCtrl", ['$scope', '$route', function($scope, $route) {
  $scope.msg = "I love red";   //NOT WORKING  **************
}]);

Answer 1

查看此plnkr https://plnkr.co/edit/rvizounydppwfgsiivaf

@rohitas behera的原因很简单，您正在使用

<div ng-app="myApp" ng-controller="mainController">
    <p><a href="#/!">Main</a></p>
    <a href="#!red">Red</a>
    <a href="#!green">Green</a>
    <a href="#!blue">Blue</a>

    <div ng-view>
    </div>
          {{msg}}   <!-- why using here !>
  </div>

所以这次msg处于maincontroller的范围。范围中没有其他控制器

要从index.html删除{{msg}}，然后将其放在各个页面中。

这样。blue.html

<div style="background-color:#2196f3;">
<h1>Blue  {{msg}}</h1>
</div>

所有HTML页面相同。

Answer 2

要在不同的上下文/控制器中更改值{{msg}}，您需要在单个.html文件中编写{{msg}}，其中您设置了相应控制器的范围。

到目前为止，该变量仅适用于您的mainController，因为它仅在index.html中看到，因此值永远不会更改。
您需要将其从index.html中删除，然后将其放入每个HTML中。

这是固定的plunkr

Answer 3

您必须在每个模板中添加{{msg}}。

 <div style="background-color:#f44336;">
  <h1>Red</h1>
 {{msg}}
 </div>

并删除{{msg}}表单index.html页面，因为maincontroller正在为索引页面和像这样的修改页面

 <div ng-app="myApp" ng-controller="mainController">
<p><a href="#/!">Main</a></p>
<a href="#!red">Red</a>
<a href="#!green">Green</a>
<a href="#!blue">Blue</a>

<div ng-view>