Angularjs 中数据双向绑定是怎么实现的？原理是什么
2个回答
展开全部
之前用artTemplate的时候，直接替换整个html会闪一下，所以自己搞了个数据绑定
主要思路我觉得就是在dom的属性上绑一些model的字段，如果model有变化，就去改变相应的model（整个很好做），然后更新dom。。
比如说
<div>{{person.name}}</div>
会被渲染成
<div data-binding="person.name">{{person.name}}</div>
那么如果person.name变化了，自然能够通过data-binding整个属性去改变div的值
反向的话，如果model更新，我觉得应该是事件触发的，比如说自带就有change，blur这些
我觉得关键是需要non-logic的模板引擎，否则在模板里加了逻辑。。整个就跪了，因为另一个逻辑分支的内容不会被渲染到dom里面，从而你如果model更新换了逻辑分支的话那就没办法了
{{if a}}
<div>{{person.name}}</div>
{{else}}
<div>{{person.age}}</div>
那么条件a变了，你也没法从age切到name
主要思路我觉得就是在dom的属性上绑一些model的字段，如果model有变化，就去改变相应的model（整个很好做），然后更新dom。。
比如说
<div>{{person.name}}</div>
会被渲染成
<div data-binding="person.name">{{person.name}}</div>
那么如果person.name变化了，自然能够通过data-binding整个属性去改变div的值
反向的话，如果model更新，我觉得应该是事件触发的，比如说自带就有change，blur这些
我觉得关键是需要non-logic的模板引擎，否则在模板里加了逻辑。。整个就跪了，因为另一个逻辑分支的内容不会被渲染到dom里面，从而你如果model更新换了逻辑分支的话那就没办法了
{{if a}}
<div>{{person.name}}</div>
{{else}}
<div>{{person.age}}</div>
那么条件a变了，你也没法从age切到name
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
在html中:
[html] view plain copy
<body ng-app="ngApp">
<div ng-controller="ngCtl">
<label ng-model="myLabel"></label>
<input type="text" ng-model="myInput" />
<button ng-model="myButton" ng-click="btnClicked"></button>
</div>
</body>
在js中:
[javascript] view plain copy
// angular app
var app = angular.module("ngApp", [], function(){
console.log("ng-app : ngApp");
});
// angular controller
app.controller("ngCtl", [ '$scope', function($scope){
console.log("ng-controller : ngCtl");
$scope.myLabel = "text for label";
$scope.myInput = "text for input";
$scope.btnClicked = function() {
[html] view plain copy
<body ng-app="ngApp">
<div ng-controller="ngCtl">
<label ng-model="myLabel"></label>
<input type="text" ng-model="myInput" />
<button ng-model="myButton" ng-click="btnClicked"></button>
</div>
</body>
在js中:
[javascript] view plain copy
// angular app
var app = angular.module("ngApp", [], function(){
console.log("ng-app : ngApp");
});
// angular controller
app.controller("ngCtl", [ '$scope', function($scope){
console.log("ng-controller : ngCtl");
$scope.myLabel = "text for label";
$scope.myInput = "text for input";
$scope.btnClicked = function() {
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
