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

K'illCode

于 2018-02-10 10:47:25 发布

阅读量258

点赞数

分类专栏： 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>