关于angular的三个绑定策略 @、=、&

最新推荐文章于 2019-03-25 11:16:16 发布

徐行莫停

最新推荐文章于 2019-03-25 11:16:16 发布

阅读量283

点赞数

分类专栏： Angular初步学习笔记整理文章标签： bootstrap angular javascript框架

本文链接：https://blog.csdn.net/qq_35765126/article/details/75455753

版权

Angular初步学习笔记整理专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en" ng-app="MyModule">
   <head>
   <meta charset="utf-8">
       <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
       <script src=".js"></script>

       <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    </head>
    <body>
        <div ng-controller="MyCtrl">
            <div class="panel panel-default">
                
                <div class="panel-title">
                    <drink flavor="{{ctrlFlavor}}"></drink>
                      <button ng-click="resetDrflavor()" class="btn btn-warnning">resetDrflavor</button>
                      <input type="text" name="" class="input" ng-model="ctrlFlavor">
                </div>
            </div>

</html>

/*-------------------------------------------------------------------js部分-----------------------------------------------------------------------*/

   // 这里有个大坑
           // *****如果html属性中名称是驼峰法命名！！！在js里大写变小写！！！
           // *****html里是 - （eat-food）写法，则js里是驼峰法（eatFood）
       },
       template:"<input type='text' ng-model='eatfood'>",
   }
});
myModule.directive("play",function(){
   return{
       restrict:'AE',
       scope:{
           child:'&aaa' //存储父元素中的方法aaa
       },
       template:'<input type="button" ng-click="child()" value="点我哟~">',
   }
});