2013-07-16 101 views
1

我有兩個控制器和一個服務。有人可以解釋爲什麼 firstname將不會更新/參考是「舊」更改時?Angular JS /數據綁定/控制器

我認爲這是控制器之間進行通信的方式......?

<!-- 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": ""       
     }, 
        ... 
    } 
+1

請說明您的具體問題或添加額外的細節,突顯正是你需要的。正如目前所寫,很難確切地說出你在問什麼。 – Stewie

回答

1

控制器之間通信,請檢查下面的小提琴。

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/

0
<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' 
    }; 
});