ng-click in angular directive

时间:2015-03-25 14:42:00

标签: javascript angularjs

我无法弄清楚为什么我的指令中的ng-click不会触发fooControls clickTest。为什么clickTest没有触发并登录到控制台?有更好的方法吗?

指令

app.directive('fooList', function () {
    return {
        restrict: 'E',
        templateUrl: './app/views/fooList.html',
        scope: { obj: "=" },
        controller: 'fooController',
        controllerAs: 'b'
    };
});

的Controler

app.controller('fooController', ['$scope', function ($scope) {
    $scope.obj = [];

    $scope.ClickTest = function (num) {console.log(num);};
}]);

HTML

<div ng-repeat="book in obj" class="container">
    <div class="row">
        <h4 class="pull-right"><button class="btn btn-small" ng-click="b.ClickTest(1)">ClickTest</button></h4>
    </div>
    <br />
</div>

修改

上面的html是foo-list的复制粘贴。完整的HTML是

<html>
<head>
</head>
<body>
<foo-list  obj="searchResults"></foo-list>
</body>
<html

1 个答案:

答案 0 :(得分:1)

您的html应该更改为将ClickTest函数直接应用于范围,而不是范围中的变量。您还需要为指令添加<foo-list />标记。

<div ng-repeat="book in obj" class="container">
    <div class="row">
        <!-- Change b.ClickTest(1) to ClickTest(1)-->
        <h4 class="pull-right"><button class="btn btn-small" ng-click="ClickTest(1)">ClickTest</button></h4>
    </div>
    <br />
    <!-- Insert a foo-list tag -->
    <foo-list  obj="searchResults"></foo-list>
</div>