zoukankan      html  css  js  c++  java
  • 今天碰到的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中的这个属性不能大写,注意标记为红色的单词!

  • 相关阅读:
    快捷定位目录 z武器
    [UOJ317]【NOI2017】游戏 题解
    2-SAT 问题与解法小结
    link-cut-tree 简单介绍
    hihocoder #1456 : Rikka with Lattice(杜教筛)
    杜教筛小结
    BZOJ 2969: 矩形粉刷(期望)
    UVA10294 Arif in Dhaka (群论,Polya定理)
    BZOJ 1926: [Sdoi2010]粟粟的书架(主席树,二分答案)
    BZOJ 2683: 简单题(CDQ分治 + 树状数组)
  • 原文地址:https://www.cnblogs.com/xiexingen/p/4396555.html
Copyright © 2011-2022 走看看