简体   繁体   English

Angular JS /数据绑定/控制器

[英]Angular JS / Data Binding / Controller

I have two controllers and one service. 我有两个控制器和一项服务。 Could someone explain me why firstname will be not updatet / the reference is "old" when changing it? 有人可以解释一下为什么姓氏不会更新/更改时引用是“旧的”吗?

I thought this is the way to communicate between controllers...? 我以为这是控制器之间进行通信的方式...?

<!-- language: lang-js --> 
// Controller 1
function controllerOne (..., myService) {
    $scope.firstname = myService.customer.firstname;
}

// Controller 2
function controllerTwo (..., myService) {
    $scope.firstnameNew = myService.customer.firstname;
}

// Service
application.factory('myService', ...)
    function(...) {
    return {
         customer: {
             "firstname": "",
             "lastname": "",
             "pers": "",
             "street": "",
             "zip": "",
             "city": "",
             "selectedCountry": "",
             "comment": ""                          
        },
                    ...
    }

Communicating between controllers, please check the below fiddle. 在控制器之间进行通讯时,请检查以下提示。

var myModule = angular.module('myModule', []);
myModule.factory('mySharedService', function($rootScope) {
    var sharedService = {};

    sharedService.message = '';

    sharedService.prepForBroadcast = function(msg) {
        this.message = msg;
        this.broadcastItem();
    };

    sharedService.broadcastItem = function() {
        $rootScope.$broadcast('handleBroadcast');
    };

    return sharedService;
});

function ControllerZero($scope, sharedService) {
    $scope.handleClick = function(msg) {
        sharedService.prepForBroadcast(msg);
    };

    $scope.$on('handleBroadcast', function() {
        $scope.message = sharedService.message;
    });        
}

function ControllerOne($scope, sharedService) {
    $scope.$on('handleBroadcast', function() {
        $scope.message = 'ONE: ' + sharedService.message;
    });        
}

function ControllerTwo($scope, sharedService) {
    $scope.$on('handleBroadcast', function() {
        $scope.message = 'TWO: ' + sharedService.message;
    });
}

ControllerZero.$inject = ['$scope', 'mySharedService'];        

ControllerOne.$inject = ['$scope', 'mySharedService'];

ControllerTwo.$inject = ['$scope', 'mySharedService'];

http://jsfiddle.net/simpulton/XqDxG/ http://jsfiddle.net/simpulton/XqDxG/

<body data-ng-app="myApp">    
<div data-ng-controller="ctrl1">
        {{firstName}}
        {{lastName}}
    </div>
      <div data-ng-controller="ctrl2">
        {{firstName}}
        {{lastName}}
    </div>
</body>
Script :
         var myApp= angular.module('myApp', []);
myApp.controller('ctrl1', function ($scope, myService) {
    $scope.firstName = myService.firstName;
    $scope.lastName = myService.lastName;
    myService.firstName = "ABC";
    myService.lastName = "DEF";
});
myApp.controller('ctrl2', function ($scope, myService) {
    $scope.firstName = myService.firstName;
    $scope.lastName = myService.lastName;
});
myApp.factory('myService', function ($rootScope) {
    return {
        firstName: '123',
        lastName: '456'
    };
});

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM