AngularJs之scope隔离作用域之=双向文本绑定

最新推荐文章于 2019-03-26 18:14:58 发布

K'illCode

最新推荐文章于 2019-03-26 18:14:58 发布

阅读量208

点赞数

分类专栏： angularJS 文章标签： angularJs

angularJS 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

AngularJs之scope隔离作用域之=双向文本绑定，代码如下：

 
       01<!DOCTYPE html>
 
       02<html lang="en">
 
       03<head>
 
       04    <meta charset="UTF-8">
 
       05    <title>Document</title>
 
       06</head>
 
       07<body ng-app="app">
 
       08    <div ng-controller="ctr1">
 
       09        <input type="text" ng-model="color" />
 
       10        <div zym-blog colors="color"></div><!--写成属性color的形式，而不是表达式{{color}}-->
 
       11    </div>
 
       12</body>
 
       13</html>
 
       14<script type="text/javascript" src="http://www.zymseo.com/js/demo.js"></script>
 
       15<script type="text/javascript" src="http://www.zymseo.com/js/angular.min.js"></script>
 
       16<script type="text/javascript">
 
       17    var m = angular.module('app', []);
 
       18    m.controller('ctr1', ['$scope', function($scope){
 
       19        $scope.color = '#f00';
 
       20    }]);
 
       21    m.directive('zymBlog', [function(){
 
       22        return {
 
       23            restrict : 'AEC',
 
       24            template : '<p><span style="color:{{color}}">赵一鸣AngularJs学习笔记</span><input type="text" ng-model="color" /></p>',
 
       25            scope : {color:'=colors'}//这里要用【=】
 
       26        }
 
       27    }]);
 
       28</script>

当改变指令里边的input值的时候，控制器里边的值也发生变化，同样的，改变控制器中input的值，指令中的input值会发生变化，达到了双向数据绑定的目的！

K'illCode

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJs之scope隔离作用域之=双向文本绑定

AngularJs之scope隔离作用域之=双向文本绑定，代码如下：01&lt;!DOCTYPE html&gt;02&lt;html lang="en"&gt;03&lt;head&gt;04 &lt;meta charset="UTF-8"&gt;05 &lt;title&gt;Document&lt;/title&gt;06&lt;/head&am
复制链接

扫一扫

专栏目录