javascript - AngularJS - 使用服务方法的结果更新 DOM

Question

我有这个标记:

<div ng-controller="AutoDeployController as autoDeploy">
   <input type="text" ng-model="autoDeploy.message">
   <p>Message: {{ autoDeploy.message }}</p>
</div>

<button ng-click="autoDeploy.change()">change</button>

我的 Controller 中的这个方法:

model = this;

model.change = function(){
    model.message = AutoDeployService.returnOne();
};

我的服务模块中的这个方法:

function returnOne(){
    return "one";
}

当我使用 Chrome 调试它时，我可以看到 model.message 更改为 "one" 并且如果我在文本框中键入，它会更改 model .message 以及带有 model.message 的任何其他字段都会动态更改...那么为什么当我单击按钮时 DOM 不更新呢？

根据我使用按钮创建和添加 DOM 对象的经验，我觉得它可能涉及 $compile 或其他系统变量，但我不确定何时/为何使用系统变量.

Answer 1

问题是您的按钮位于 autoDeploy Controller 之外。使用 Controller 将该按钮移动到 div 内，它将调用更改方法。

<div ng-controller="AutoDeployController as autoDeploy">
   <input type="text" ng-model="autoDeploy.message">
   <p>Message: {{ autoDeploy.message }}</p>
   <button ng-click="autoDeploy.change()">change</button>
</div>