从Angular中的另一个控制器刷新控制器

为了让两个控制器在Angular中相互通话，建议创建一个可供两个控制器访问的公共服务。我试图用一个非常简单的fiddle来说明这一点。根据您按哪个按钮，该应用程序应该按钮在按钮下面定制消息。从Angular中的另一个控制器刷新控制器

那么，为什么这不工作？我错过了一些明显的或更基本的东西？

HTML

<div ng-controller="ControllerOne"> 
    <button ng-click="setNumber(1)">One</button> 
    <button ng-click="setNumber(2)">Two</button> 
</div> 
<div ng-controller="ControllerTwo">{{number}} was chosen!</div>

的JavaScript

var app = angular.module('app', []); 

app.factory("Service", function() { 
    var number = 1; 
    function getNumber() { 
    return number; 
    } 
    function setNumber(newNumber) { 
    number = newNumber; 
    } 
    return { 
    getNumber: getNumber, 
    setNumber: setNumber, 
    } 
}); 

function ControllerOne($scope, Service) { 
    $scope.setNumber = Service.setNumber; 
} 

function ControllerTwo($scope, Service) { 
    $scope.number = Service.getNumber(); 
}

来源

2013-10-18 David Jones

尝试在你的控制器创建一个表：

$scope.$watch(function() { return Service.getNumber(); }, 
    function (value) { 
     $scope.number = value; 
    } 
);

这里是工作提琴http://jsfiddle.net/YFbC2/

来源

2013-10-18 08:39:41 Yoggi

我的问题实际上是我的实际代码，这是一个简化版本*多*更加复杂（太多SO张贴）。在我复杂的设置中，彼得的建议并没有解决我的问题，但它实际上可能是我提出的具体问题（+1）的最佳解决方案。添加手表正是我所需要的，所以我选择这个作为正确答案（就我而言）。感谢大家！ –

好像有问题property that holds a primitive value。所以，你可以通过这些更改：

app.factory("Service", function() { 
    var number = {val: 1}; 
    function getNumber() { 
     return number; 
    } 
    function setNumber(newNumber) { 
     number.val = newNumber; 
    } 
    return { 
     getNumber: getNumber, 
     setNumber: setNumber, 
    } 
});

见fiddle

来源

2013-10-18 08:40:30

这是建议的三种解决方案的正确方法。 – ganaraj

在HTML Service.getNumber()和控制器只需拨打ControllerTwo呼叫服务，如：

$scope.Service = Service;

例子：

HTML

<div ng-controller="ControllerOne"> 
    <button ng-click="setNumber(1)">One</button> 
    <button ng-click="setNumber(2)">Two</button> 
</div> 
<div ng-controller="ControllerTwo">{{Service.getNumber()}} was chosen!</div>

function ControllerOne($scope, Service) {  
    $scope.setNumber = Service.setNumber; 
} 

function ControllerTwo($scope, Service) { 
     $scope.Service = Service; 
}

演示Fidlle

来源

2013-10-18 09:16:20

从Angular中的另一个控制器刷新控制器

回答

相关问题