Angularjs 不确定为什么没有将对factory属性的更改推送到页面上

这是我遇到的问题的一个过于简单的例子。很明显，在我对角度的理解中，我遗漏了一些东西

这里有一个Plunker：

以及以下相关位的复制粘贴：

<div ng-controller="myController"> 
  <div>message: <label ng-model="message"></label></div>
  <div></div><button ng-click="start()">Get Message</button></div>
</div>

var app = angular.module("app", []);  
  app.service('GetMessage', function() {
    var message;
    var start = function () {
      this.message = 'Hello World';
    };  
    return {
      message: this.message,
      start: start
    }
  });

app.controller('myController', function ($scope, GetMessage) {    
  $scope.message = GetMessage.message;
  $scope.start = function () {
    GetMessage.start();
    console.warn('started..');
  };
});

信息：
得到消息
var-app=angular.module（“app”，[]）；
app.service（'GetMessage'，function（）{
var消息；
var start=函数（）{
this.message='Hello World'；
};  
返回{
message:this.message，
开始：开始
}
});
app.controller（'myController'，函数（$scope，GetMessage）{
$scope.message=GetMessage.message；
$scope.start=函数（）{
GetMessage.start（）；
console.warn（'started..'）；
};
});

我希望label指令将双向绑定到工厂的message属性，这样当调用start（）函数并更新消息时，页面也会被绑定

要以这种方式更新标签，是否需要将事件广播到$rootScope，在控制器中侦听它，然后更新标签？这似乎是一种非常手工的方法。。当然还有更好的办法

---

谢谢。

您当前使用的是基本数据类型，这意味着以下行将把值复制到新变量中：

$scope.message = GetMessage.message;

app.controller('myController', function($scope, GetMessage) {

  var watchExpression = function() {
    return GetMessage.message;
  };

  var listener = function(newValue, oldValue) {
    if (newValue === oldValue) return;
    $scope.message = newValue;
  }

  $scope.$watch(watchExpression, listener);

  $scope.start = function() {
    GetMessage.start();
    console.warn('started..');
  };
});

更新一个不会影响另一个

一个简单的解决方案是使用对象：

var message = { value: '' };

var start = function() {
  message.value = 'Hello World';
};

以及：

现在，对对象的引用将被复制到一个新变量中，而这两个变量都将引用同一个对象

另一个问题是，您正在标签上使用

ngModel

来显示值，这将不起作用

ngModel

通常用于输入、选择和文本区域元素

您可以改为使用

ng bind

：

<label ng-bind="message.value"></label>

---

演示：

他还忘记了

ng应用程序

指令。它在你的plnkr中，但你可能想在答案中也提到它。啊，原始数据类型-我现在明白了。非常感谢。看到$watch如何实现这一点也很好，如果我将来需要它，我会提到这一点。再次感谢。我想我会在10个月后再考虑这个问题。关于Angular中原型继承的一个很好的概述可以在这里找到：正如@ivarni所提到的，您忘记了在plunker中引导应用程序。例如：

不确定复制粘贴是否出错。谢谢，是的，这是本例的错误，干杯。

<label>{{message.value}}</label>

app.controller('myController', function($scope, GetMessage) {

  var watchExpression = function() {
    return GetMessage.message;
  };

  var listener = function(newValue, oldValue) {
    if (newValue === oldValue) return;
    $scope.message = newValue;
  }

  $scope.$watch(watchExpression, listener);

  $scope.start = function() {
    GetMessage.start();
    console.warn('started..');
  };
});