zoukankan      html  css  js  c++  java
  • angularjs 不同的controller之间值的传递

    Sharing data between controllers in AngularJS

    I wrote this article to show how it can possible to pass data from one Controller to another one.

    There are two ways to do it, using a service or exploiting depending parent/child relation between controller scopes.
    In this post, we’ll analyze the last one method.

    It is possible to send data from parent controller to a child controller and viceversa.
    To transmit data from the FirstController to SecondController, which the scope of the first one is parent to the scope of the second one, it should use $broadcast method in the FirstController.
    Here the javascript code:
    父传($scope.$broadcast)子接收($scope.$on)
    angular.module('myApp', [])
    .controller('ParentCtrl', ['$scope', function($scope) {
    $scope.message = "Child updated from parent controller";

    $scope.clickFunction = function() {
    $scope.$broadcast('update_parent_controller', $scope.message);
    };
    }
    ])
    .controller('ChildCtrl', ['$scope', function($scope) {
    $scope.message = "Some text in child controller";

    $scope.$on("update_parent_controller", function(event, message) {
    $scope.message = message;
    });
    }
    ]);

    Here a plunker for a live demo.

    Instead, if it need to send data from the SecondController (child) to the FirstController (parent), it should use the $emit method.
    Here the javascript code:
    子传($scope.$emit)父接收($scope.$on)
    angular.module('myApp', [])
    .controller('ParentCtrl', ['$scope', function ($scope) {
    $scope.message = "Some text in parent";
    $scope.$on("update_parent_controller", function(event, message){
    $scope.message = message;
    });

    }])
    .controller('ChildCtrl', ['$scope', function ($scope) {
    $scope.clickFunction = function() {
    $scope.message = "Parent updated";

    $scope.$emit('update_parent_controller', $scope.message);
    }

    }]);

    Here a plunker for a live demo.

    Finally, here a little trick where two controller have no parent/child relationship.
    It should pass data from one controller through $rootScope and the $broadcast method.
    Here the javascript code:
    兄弟传($rootScope.$broadcast)兄弟接收($rootScope.$on)
    angular.module('myApp', [])
    .controller('FirstCtrl', ['$scope', '$rootScope', function($scope, $rootScope) {
    $scope.message = "Clicked!";

    $rootScope.clickFunction = function() {
    $rootScope.$broadcast("Update", $scope.message);
    };
    }])
    .controller('SecondCtrl', ['$scope','$rootScope', function($scope,$rootScope) {
    $scope.message = "Waiting for a click...";

    $rootScope.$on("Update", function(event, message) {
    $scope.message = message;
    });
    }]);

    Here a plunker for a live demo.

    以上三个Demo 打不开,需要翻墙。
     
  • 相关阅读:
    5月13日工作日志(需求规格说明书4.0)
    第十次会议
    5月21日日志
    5月12日工作日志
    关于游戏平衡性——王者荣耀英雄伤害数值参考
    每天一点新东西(1)
    我在都匀做网优(补)
    我在都匀做网优
    不算新的开始
    input的focus事件时,鼠标光标在最后
  • 原文地址:https://www.cnblogs.com/share123/p/4153275.html
Copyright © 2011-2022 走看看