您的位置：首页 > Web前端 > AngularJS

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

2015-04-06 20:45 260 查看

最近在自个儿研究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中的这个属性不能大写,注意标记为红色的单词!

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航