在不使用$ rootScope的情況下使用Angular路由更改控制器時如何更改范圍

Question

https://plnkr.co/edit/U9tL95qS5AgsPu6nNwVD/

我可以使用templateUrl更改ng-view。 但是當我在每個新控制器中使用$ scope.msg更新它時，它並沒有更新{{msg}}。

有沒有一種方法可以不使用$ rootscope來更新它。 自從我聽說$ rootScope的做法是不好的。

我想我沒有注冊控制器？ 我是Angular的新手。

我不知道如何使用服務

在index.html中

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

Answer 1

您必須在每個模板中添加{{msg}}。

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

並從index.html頁面中刪除{{msg}}表單，因為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>

Answer 2

要在不同的上下文/控制器中更改值{{msg}} ，您需要在已設置相應控制器范圍的單個.html文件中寫入{{msg}} 。

到目前為止，僅在index.html可以看到，該變量只能由您的mainController訪問，因此該值永不變。
您需要將其從index.html刪除，並將其放入每個html中。

這是固定的插頭

Answer 3

看看這個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頁面都一樣。