今天碰到的angular 中的一个小坑

最近在自个儿研究angular，在写一个demo的时候总是有问题，最后发现居然是大小写的问题，卧槽特tm的坑爹了，代码如下：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="/css/bootstrap-3.0.0/css/bootstrap.css">
</head>
<body><div ng-controller="Demo_Ctr"><!-- {{loveDrink}} <br/> --><drinking showLove="ShownInfo(name)"></drinking><drinking showLove="ShownInfo(name)"></drinking><drinking showLove="ShownInfo(name)"></drinking></div><script src="/framework/angular-1.3.0.14/angular.js"></script><script src="/scopeAnd.js"></script>
</body>
</html>

var myApp=angular.module('myApp',[]);
myApp.controller('Demo_Ctr',['$scope',function($scope){$scope.ShownInfo=function(name){console.log("Hello "+name);}
}]);
myApp.directive('drinking',function(){return {restrict:'AE',scope:{showLove:'&'},template:'<input type="text" ng-model="userName" /><br/>'+'<button class="btn btn-default" ng-click="showLove({name:userName})">Show</button><br/>' } });

修改后的代码如下：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="/css/bootstrap-3.0.0/css/bootstrap.css">
</head>
<body><div ng-controller="Demo_Ctr"><!-- {{loveDrink}} <br/> --><drinking showLove="ShownInfo(name)"></drinking><drinking showLove="ShownInfo(name)"></drinking><drinking showLove="ShownInfo(name)"></drinking></div><script src="/framework/angular-1.3.0.14/angular.js"></script><script src="/scopeAnd.js"></script>
</body>
</html>

var myApp=angular.module('myApp',[]);
myApp.controller('Demo_Ctr',['$scope',function($scope){$scope.ShownInfo=function(name){console.log("Hello "+name);}
}]);
myApp.directive('drinking',function(){return {restrict:'AE',scope:{showlove:'&'},template:'<input type="text" ng-model="userName" /><br/>'+'<button class="btn btn-default" ng-click="showlove({name:userName})">Show</button><br/>' } });

　切记，directive中的这个属性不能大写,注意标记为红色的单词!

转载于:https://www.cnblogs.com/xiexingen/p/4396555.html

今天碰到的angular 中的一个小坑相关推荐

mysql内核测试,MySQL 5.7内核复制中的一个小坑
问题背景最近在写一个作为MySQL Slave的角色的程序,连接到MySQL Master使用MySQL复制协议来Dump Binlog事件流.很自然,这个程序在第一次运行的时候,其事务GTIDSe ...
python 子图_python 实现在一张图中绘制一个小的子图方法
有时候为了直观展现图的信息,可以在大图中添加小子图的方式进行数据分析,如下图所示: 具体的代码如下:该图连接了数据库,当然重要的不是数据展示,而是添加子图的方法. import matplotlib. ...
python画50个图-python 实现在一张图中绘制一个小的子图方法
有时候为了直观展现图的信息,可以在大图中添加小子图的方式进行数据分析,如下图所示: 具体的代码如下:该图连接了数据库,当然重要的不是数据展示,而是添加子图的方法. import matplotlib. ...
python画简便的图-python 实现在一张图中绘制一个小的子图方法
有时候为了直观展现图的信息,可以在大图中添加小子图的方式进行数据分析,如下图所示: 具体的代码如下:该图连接了数据库,当然重要的不是数据展示,而是添加子图的方法. import matplotlib. ...
React学习中的一个小实战（智能社）
最近在学习React,跟着前端blue大神学习基础,这是课程中的一个小案例,因为不会,希望写博客来加强记忆. 此案例是用React来实现豆瓣电影的前后端数据交互. 首先来看一下改之前的源码. 博客会附 ...
python一张图-python 实现在一张图中绘制一个小的子图方法
有时候为了直观展现图的信息,可以在大图中添加小子图的方式进行数据分析,如下图所示: 具体的代码如下:该图连接了数据库,当然重要的不是数据展示,而是添加子图的方法. import matplotlib. ...
[LeetCode]29 两数相除和一个小坑点
给定两个整数,被除数 dividend 和除数 divisor.将两数相除,要求不使用乘法.除法和 mod 运算符.返回被除数 dividend 除以除数 divisor 得到的商.示例 1:输入: ...
parallel的一个小坑
parallel介绍 parallel是一个很好用的linux并行软件,与linux自带的xargs功能类似,但比它更好用,关于parallel的安装及具体用法可以参考该文章:15分钟神器gnu pa ...
golang原生库mime/multipart上传formdata文件的一个小坑unexpected EOF
golang原生库mime/multipart上传formdata文件的一个小坑unexpected EOF 遇到的问题问题代码问题分析正确代码总结遇到的问题用mime/multipart ...
Rocksdb Slice使用中的一个小坑
本文记录一下使用Rocksdb Slice过程中的一个小小坑,差点没一口老血吐出来. rocksdb的Slice 数据结构是一个小型得不可变类string数据结构,设计出来的目的是为了保证rocksd ...

今天碰到的angular 中的一个小坑

今天碰到的angular 中的一个小坑相关推荐

最新文章

热门文章