关闭

关于angular中指令调用controller的方法:&

标签: angularjs指令指令调用controller的方法
2369人阅读 评论(0) 收藏 举报
分类:

html:

<!doctype html>
<html ng-app="app">
    <head>
    </head>
    <body>

        <div ng-controller="MyCtrl">
            <greeting aa="sayHello(name)"></greeting><br>
            <greeting aa="sayHello(name)"></greeting><br>
            <greeting aa="sayHello(name)"></greeting><br>
        </div>
        <script src="angular.min.js"></script>
        <script src="js/cc.js"></script>
    </body>
</html>

js:

var app = angular.module('app', []);

app.controller('MyCtrl', function($scope){
    $scope.sayHello = function(name) {
        alert("Hello"+name);
    }
})

app.directive("greeting", function(){
    return {
        scope: {
            greet: '&aa'
        },
        restrict: "AE",
        template: '<input type="text" ng-model="username"><br><button ng-click="greet({name:username})">click</button>'
    }
});

首先,scope中的@aa匹配html中的aa的内容(是个方法),然后将greet指向sayHello,参数绑定了input的内容username,将name的值指向username,点击按钮调用方法。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:62285次
    • 积分:1379
    • 等级:
    • 排名:千里之外
    • 原创:72篇
    • 转载:32篇
    • 译文:1篇
    • 评论:5条