如何在不使用$ rootScope的情况下使用Angular路径更改控制器时更改范围

时间:2017-09-01 06:34:59

标签: angularjs

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

3 个答案:

答案 0 :(得分:0)

你必须在每个模板中添加{{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>

答案 1 :(得分:0)

  

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

截至目前,该变量仅供mainController index.html访问,因为它仅在index.html中显示,因此值永远不会改变。
您需要将其从- (CGSize)sizeThatFits:(CGSize)size{ CGSize result = [super sizeThatFits:size]; result.height += self.heightDelta; return result; } 中删除并将其放在每个html中。

  

这是固定的plunkr

答案 2 :(得分:0)

查看此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页面都一样。