Angularjs 角双向动态约束问题

我正在尝试输出以下信息，并使用angulars自动绑定进行实时更新。第一次和最后一次更新都正常，但完全更新并不像我预期的那样。我感谢你的帮助

所需输出：

first = john
last = doe
full name=john doe.

HTML

---

初始输出似乎正确，第一次和最后一次更新与预期一致。但是全名不会更新，尽管它是$scope变量，并且是first和last的乘积。

因为您在$scope上定义了一个字符串，该字符串与多个参数连接在一起，所以当您更改用于组装它的部件时，它不会自动更改

$scope.full = $scope.first + " " + $scope.last;

如果你想实现你所追求的目标，你可以做以下两件事之一：

一:

---

由于您在$scope上定义了一个字符串，该字符串与多个参数连接在一起，因此当您更改用于组装它的部件时，它不会自动更改

如果你想实现你所追求的目标，你可以做以下两件事之一：

一:

---

下面的行只运行一次。所以它是用分配给first和last的第一个值启动的

$scope.full = $scope.first + " " + $scope.last;

因此，如果您希望绑定工作，而不需要对控制器进行不必要的操作。尽可能保持控制器清洁

<div ng-app="nameApp">
  <div ng-controller="nameController">
    <input ng-model="first"/>
     <p>first = {{first}}</p>
     <input ng-model="last"/>
     <p>last = {{last}}</p>
    <p>full name = {{first + ' ' + last}}</p>
  </div>
</div>

如果您关心性能，您可能希望避免定义太多手表，那么可以使用ng更改：

控制器：

$scope.updateFull = function(){
    $scope.full = $scope.first + " " + $scope.last;
}

视图：

<div ng-app="nameApp">
  <div ng-controller="nameController">
    <input ng-model="first" ng-change="updateFull();"/>
    <p>first = {{first}}</p>
    <input ng-model="last" ng-change="updateFull();"/>
    <p>last = {{last}}</p>
    <p>full name = {{full}}</p>
 </div>

---

下面的行只运行一次。所以它是用分配给first和last的第一个值启动的

$scope.full = $scope.first + " " + $scope.last;

因此，如果您希望绑定工作，而不需要对控制器进行不必要的操作。尽可能保持控制器清洁

<div ng-app="nameApp">
  <div ng-controller="nameController">
    <input ng-model="first"/>
     <p>first = {{first}}</p>
     <input ng-model="last"/>
     <p>last = {{last}}</p>
    <p>full name = {{first + ' ' + last}}</p>
  </div>
</div>

如果您关心性能，您可能希望避免定义太多手表，那么可以使用ng更改：

控制器：

$scope.updateFull = function(){
    $scope.full = $scope.first + " " + $scope.last;
}

视图：

<div ng-app="nameApp">
  <div ng-controller="nameController">
    <input ng-model="first" ng-change="updateFull();"/>
    <p>first = {{first}}</p>
    <input ng-model="last" ng-change="updateFull();"/>
    <p>last = {{last}}</p>
    <p>full name = {{full}}</p>
 </div>

---

它不会自动更新，因为您在连接后以全名传递字符串。它返回的是简单字符串而不是角度变量。您需要执行以下操作以自动更新值

 $scope.$watchGroup(["first","last"],function(){
     $scope.full = $scope.first + " " + $scope.last;
  });

---

它不会自动更新，因为您在连接后以全名传递字符串。它返回的是简单字符串而不是角度变量。您需要执行以下操作以自动更新值

 $scope.$watchGroup(["first","last"],function(){
     $scope.full = $scope.first + " " + $scope.last;
  });

---

更新您的代码，如下所示：

视图更新

如上所述，我使用ng change指令更改/更新视图页面输入元素，并为namecontroller w.r.t.nameApp模块创建相同的作用域函数。

---

希望它能帮助你

更新您的代码，如下所示：

视图更新

如上所述，我使用ng change指令更改/更新视图页面输入元素，并为namecontroller w.r.t.nameApp模块创建相同的作用域函数。

---

希望它能帮助你

您误解了此全名是绑定的，一旦您将不得不保持监视以更新全名。抱歉，我不明白您能否提供一个示例？我在哪里指定了全名的一次性绑定？控制器每个实例仅运行一次。full永远不会在您的代码中更改，因为您误会了此全名。一旦您需要随时更新全名，则会绑定此全名。抱歉，我不明白。您可以提供一个示例吗？我在哪里指定了全名的一次性绑定？控制器每个实例只运行一次。full永远不会改变你的代码，因为isok这个看起来很明显，我希望我看到了，但我想有两个可以帮助我理解angular是如何工作的。非常感谢。@LaurencePass高兴地说：好的，这个看起来很明显，我希望我看到了，但我想有两个可以帮助我理解angular是如何工作的。非常感谢。@LaurencePass高兴：Deblaton在建议您不要使用$watch一事上击败了我，所以我建议这篇文章作为进一步阅读，详细解释为什么Deblaton在建议您不要使用$watch一事上击败了我，所以我建议这篇文章作为进一步阅读，详细解释为什么不使用$watch

<div ng-app="nameApp">
<div ng-controller="nameController">
<input ng-model="first" ng-change="change()"/>
 <p>first = {{first}}</p>
 <input ng-model="last" ng-change="change()" />
 <p>last = {{last}}</p>
<p>full name = {{full}}</p>

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


app.controller('nameController', function($scope) {
    $scope.first="john";
    $scope.last="doe";
    $scope.full = $scope.first + " " + $scope.last;
    $scope.change= function(){
       $scope.full=$scope.first + " " + $scope.last;
    }
});