角绑定不会发生

nitroman 发表于 Dev

硝基人

我是Angular的新手。我正在尝试一些演示程序，但遇到了问题。

这是我的HTML代码。我正在使用名为domController和app的控制器myDom。

<!DOCTYPE html>
<html>
<head>
    <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src = "dom.js"></script>
    <title>Angular Dom Management</title>
</head>
<body>
    <div ng-app="myDom" ng-controller="domController">
        <input type="textbox" ng-model="first_name"></input>
        <input type="textbox" ng-model="last_name"></input>
        <span>{{myName}}</span>
    </div>

    </div>

</body>
<script type="text/javascript">

</script>

</html>

这是我写在dom.js文件中的控制器脚本。

var myDom = angular.module('myDom',[]);
    myDom.controller('domController', ['$scope', function($scope){      
        $scope.first_name = "Rock";
        $scope.last_name = "Star";
        $scope.myName = $scope.first_name +" "+$scope.last_name;
    }]);

我的问题是，当我在浏览器中打开它时，绑定将{{myName}}正确的值显示为Rock Star。但是，当我在输入字段中更改值时，这些值不会更改。

tyme合资公司

$scope.myName是你的第一个和最后一个名称的串联负载-myName不是看价值，并不会实时更新-你需要添加watch或ngChange不断更新。

解决方案一：使用视图进行串联：

<span>{{first_name + " " + last_name}}</span>

解决方法二：添加一个 ngChange

$scope.nameUpdated = function() {
    $scope.myName = $scope.first_name +" "+$scope.last_name;
}

<input type="textbox" ng-change="nameUpdated()" ng-model="first_name"></input>
<input type="textbox" ng-change="nameUpdated()" ng-model="last_name"></input>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。