码迷,mamicode.com
首页 > Web开发 > 详细

--@angularJS--独立作用域scope绑定策略之=符策略

时间:2015-05-20 13:05:56      阅读:127      评论:0      收藏:0      [点我收藏+]

标签:

1、index.html:

<!DOCTYPE HTML>
<html ng-app="app">
<head>
    <title>scopeEqual</title>
    <meta charset="utf-8">    
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/angular.js"></script>
</head>
<body>
<!-- 下面是指令scope作用域=符demo. -->
<div ng-controller="myCtrl">
    <label for="" class="control-label">控制器中的内容:</label>
    <input type="text" ng-model="ctrlFlavor" />
    <label for="" class="control-label">指令中的内容:</label>
    <drink flavor="ctrlFlavor"></drink>
</div>
<script src="./scopeEqual.js"></script>
</body>
</html>

2、scopeEqual.js:

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

myModule.controller(‘myCtrl‘, [‘$scope‘, function($scope){
    $scope.ctrlFlavor = "百事达";
}]);
myModule.directive(‘drink‘,function(){
    return {
        restrict: ‘AE‘,
        scope:{
            fla:‘=flavor‘//还是传递同标签内的属性值,就能形成双向数据绑定.在独立作用域中同样是ng-model中的值,要想形成双向ng-model数据绑定的赋值形式的话必须用=号赋属性值给ng-model才行.fla是ng-model值,标签属性flavor获取的是控制器中所赋的值
        },
        template: ‘<input type="text" ng-model="fla" />‘,
        // link: function(scope, elm, attrs) {
        //     scope.fla = scope.ctrlFlavor;//这样写虽然能把控制器中的初始值赋给ng-model="fla"中的fla,但是与上一个input里面的ng-model="ctrlFlavor"形成不了双向数据绑定,就是你我均独立,互不干扰,互不影响,所以要实现双向数据绑定,还得借助于scope:里面的等号"="双向绑定机制
        // }
    }
});

--@angularJS--独立作用域scope绑定策略之=符策略

标签:

原文地址:http://www.cnblogs.com/koleyang/p/4516725.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!