Question

我是Angular JS的新手。这是我的代码

<div ng-controller="firstCtrl">
    <div  ng-repeat="city in citynames">
        <p>{{city.name}}</p>
    </div>
</div>

<div ng-controller="secondCtrl">
    <button ng-click="changethis()">Click Here</button>
</div>

var app=angular.module('mainApp',[]);
    app.controller('firstCtrl',['$scope','$http',function($scope,$http){
        $scope.citynames=[{name:'Chennai',id:'1'},
            {name:'Bangalore',id:'2'},
            {name:'Hyderabad',id:'3'},
            {name:'Coimbatore',id:'4'},
            {name:'Mysore',id:'5'},
            ];
       }]);
    app.controller('secondCtrl',['$scope','$http',function($scope,$http){
        $scope.changethis=function(){
            $scope.citynames=[{name:'Delhi',id:'1'},
            {name:'Sydney',id:'2'},
            {name:'Newyork',id:'3'},
            {name:'London',id:'4'},
            ];
        };

       }]);

我想在点击第二个控制器ng-repeat事件时更改第一个控制器ng-click。但是使用这个代码并没有改变。

Answer 1

每个控制器都有一个单独的范围，您可以使用$ rootScope https://docs.angularjs.org/api/ng/service/ $ rootScope这是一个全局范围，或者使用角度服务/工厂https://docs.angularjs.org/guide/services来共享控制器之间的范围。

Answer 2

两者都有不同的范围，因此如果DOM在它们之间具有父子关系，则无法以任何简单的方式使用emit或broadcast方法。

或者您可以使用$controller服务。

app.controller('secondCtrl',  ['$scope','$http','$controller',function($scope,$http,$controller){
        var scopeSecond;       
    $controller("firstCtrl",{'$scope': scopeSecond})   

         $scope.changethis=function(){
                    scopeSecond.citynames=[{name:'Delhi',id:'1'},
                    {name:'Sydney',id:'2'},
                    {name:'Newyork',id:'3'},
                    {name:'London',id:'4'},
                    ];
                };

               }]);

Answer 3

您可以对ng-repeat和click使用相同的控制器。通过这种方式，您将获得相同的$ scope，并且只需更改将自动更改ng-repeat的$ scope。

在这种情况下，只有一个控制器具有更简单和更清洁的功能。

<div ng-controller="Ctrl"> 
 <div ng-repeat="city in citynames"> 
  <p>{{city.name}}</p> 
 </div> 
 <button ng-click="changethis()">Click Here</button> 
</div> 

var app=angular.module('mainApp',[]); 
app.controller('Ctrl',['$scope','$http',function($scope,$http){  
 $scope.citynames=[{name: 
  'Chennai',id:'1'}, {name:
  'Bangalore',id:'2'}, {name:
  'Hyderabad',id:'3'}, {name:
  'Coimbatore',id:'4'}, {name:
  'Mysore',id:'5'}, ]; }]); 

 $scope.changethis=function(){
  $scope.citynames=[{name:'Delhi',id:'1'}, {name:'Sydney',id:'2'}, {name:'Newyork',id:'3'}, {name:'London',id:'4'}, ]; }; }
]);

在这种方法中，你有一个控制器来管理所有＆＃34;。这对于您具有类似功能或者您在同一视图中处理相同变量的这些时间非常有用。我真的建议每个视图使用一个控制器，并在需要将数据从一个视图保存到另一个视图时使用工厂。

希望有所帮助

Answer 4

你可以这样做..

    var app=angular.module('mainApp',[]);
    app.controller('firstCtrl',['$scope','$http',function($scope,$http){
        $scope.citynames=[
            {name:'Chennai',id:'1'},
            {name:'Bangalore',id:'2'},
            {name:'Hyderabad',id:'3'},
            {name:'Coimbatore',id:'4'},
            {name:'Mysore',id:'5'},
            ];

       $scope.$on("changeCities",function(){
            $scope.citynames=[{name:'Delhi',id:'1'},
               {name:'Sydney',id:'2'},
               {name:'Newyork',id:'3'},
               {name:'London',id:'4'},
            ];
       });
       }]);


    app.controller('secondCtrl',['$scope','$http',function($scope,$http){
        $scope.$broadcast("changeCities");
    }]);

Answer 5

另一个解决方案是使用$ rootScope，但不应该污染此对象。 Here你有一个有效的例子。

var app=angular.module('app',[]);
app.controller('firstCtrl',['$rootScope','$http',function($rootScope,$http){
  $rootScope.citynames=[{name:'Chennai',id:'1'},
      {name:'Bangalore',id:'2'},
      {name:'Hyderabad',id:'3'},
      {name:'Coimbatore',id:'4'},
      {name:'Mysore',id:'5'},
      ];
 }]);

app.controller('secondCtrl',['$rootScope','$http',function($rootScope,$http){
    $rootScope.changethis=function(){
        $rootScope.citynames=[{name:'Delhi',id:'1'},
          {name:'Sydney',id:'2'},
          {name:'Newyork',id:'3'},
          {name:'London',id:'4'},
        ];
    };
}]);

使用其他控制器更改ng-repeat值

5 个答案: