Question

我试图在SecondCtrl中获取FirstCtrl数据，但是在SecondCtrl中没有响应，请帮我解决这个问题

我曾试图在$ rootscope上使用$ broadcast和$ emit。但是没有数据出现在

上

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);

myApp.controller('FirstCtrl', function( $scope,  $rootScope) {
    $scope.firstName = 'Ganpat';
    //$rootScope.$emit('firstName', $scope.firstName);
    $rootScope.$broadcast('firstName:broadcast', $scope.firstName);
});

myApp.controller('SecondCtrl', function( $scope,  $rootScope){
  $rootScope.$on('firstName:broadcast', function(event,data){
    $scope.firstName = data;
    console.log(data);
  });
});
</script>
<body>

  <div ng-app="myApp">
    <div ng-controller="FirstCtrl">
      <input type="text" ng-model="firstName">
      <br>Input is : <strong>{{firstName}}</strong>
    </div>
    <hr>
    <div ng-controller="SecondCtrl">
      Input should also be here: {{firstName}}
    </div>
  </div>
</body>
</html>

Answer 1

代码现在编译并正常运行。你可以将它切成小提琴并运行。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
    var myApp = angular.module('myApp', []);

    myApp.factory('UserService', function () {
        var self = this;
        var firstName = '';
        self.SetFirstName = function (name) { firstName = name; }
        self.GetFirstName = function () { return firstName; }
        return self;
    });

    myApp.controller('FirstCtrl', ['$scope', 'UserService', function ($scope, UserService) {

        UserService.SetFirstName("coolMan");
    }]);

    myApp.controller('SecondCtrl', ['$scope', 'UserService', function ($scope, UserService) {
        $scope.firstNameTest = '';
        $scope.service = UserService;
        $scope.$watch('service.GetFirstName()', function (newVal) {
            console.log("New Data", newVal)
            $scope.firstNameTest = newVal;
        });
    }]);

</script>
<body>

    <div ng-app="myApp">
        <div ng-controller="FirstCtrl">
            <input type="text" ng-model="firstName">
            <br>
            Input is : <strong>{{firstName}}</strong>
        </div>
        <hr>
        <div ng-controller="SecondCtrl">
            Input should also be here: {{firstNameTest}}
        </div>
    </div>
</body>
</html>

<强> 修改

解决OPS评论。

我知道这种方法会起作用，它会给出正确的结果，但是我已经研究了$ rootscope和事件$ emiter和$ broadcast会做的事情这个伎俩，所以如果你知道的话请告诉我，谢谢为你的答案。

你想做的是一个坏主意。您的方法强制控制器之间更紧密的耦合。通过在rootscope上工作，你强迫所有控制器依赖于一个在根镜中的物品。这很糟糕，因为控制器不是自包含的模块。

通过传递服务，您可以解耦控制器。这意味着它们可以用作视图控制器，指令控制器，几乎任何需要隔离模块的东西。

同样使用服务，您现在可以缓存结果，在其上执行集中式业务逻辑，并封装您获取数据的方式。这在根镜上无法轻易完成。

总而言之，我不会向你展示做你想做的事情的可怕方式。这不好，并且会让看到这篇文章的其他人使用不良做法。

Angular1兄弟控制器如何访问彼此的数据

1 个答案: