Question

我正试图以下列方式拨打$scope function中的AngularJS Directive

JS

    var app = angular.module('app', []);
    app.controller('customDirEx', ['$scope', function ($scope) {
    $scope.users = [
        {
            name: 'ABC',
            rno: '100'
        },
        {
            name: 'DEF',
            rno: '200'
        }
    ];

    $scope.onChangeFoo = function() {
        console.log('test');
    }

    $scope.dataChange = function() {
        console.log('test abc', $scope);
        $scope.onInitEle();
    }

    $scope.dataChange();
}]);

app.directive('studentInfo', function(){
    var directive = {};

    directive.scope = {
        user: '=user',
        onInitEle: '='
    };
    directive.restrict = 'EA';
    directive.template = '<div>Name: {{user.name}}<br>R.NO: {{user.rno}}</div>';

    return directive;
});

HTML

<body ng-app="app">
        <div ng-controller="customDirEx">            
            <student-info ng-repeat="user in users" user="user" on-init-ele="onChangeFoo"></student-info>            
        </div>
    </body>

$scope.onInitEle is not a function - 这是我得到的错误

此处调用onClickEle而不是onChangeFoo的目的是在多个位置重复使用JS，以便我可以在需要时调用onChangeBar。

Answer 1

首先，您必须将"onClickEle: '='"替换为"onClickEle: '&'" 使用＆amp;意味着你要传递参考资料。

第二个错误是您没有从模板中调用它。所以，我已将模板代码更改为：

directive.template = '<div ng-click="onClickEle()"> Name: {{user.name}}<br>R.NO: {{user.rno}}</div>';

第三个错误是：你在控制器中调用$scope.onClickEle();，但是onClickEle（）没有在控制器中定义，它在指令下。所以，控制器无法找到方法。

第四个错误是你正在传递on-click-ele="onChangeFoo"，正确的语法是：

on-click-ele="onChangeFoo()"

下面给出的工作更新代码：

var app = angular.module('app', []);
    app.controller('customDirEx', ['$scope', function ($scope) {
    $scope.users = [
        {
            name: 'ABC',
            rno: '100'
        },
        {
            name: 'DEF',
            rno: '200'
        }
    ];

    $scope.onChangeFoo = function() {
        console.log('test....');
    }

    $scope.dataChange = function() {
        console.log('test abc', $scope);
        //$scope.onClickEle();
    }

    $scope.dataChange();
}]);

app.directive('studentInfo', function(){
    var directive = {};

    directive.scope = {
        user: '=user',
        onClickEle: '&'
    };
    directive.restrict = 'EA';
    directive.template = '<div ng-click="onClickEle()"> Name: {{user.name}}<br>R.NO: {{user.rno}}</div>';

    return directive;
});

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app">
        <div ng-controller="customDirEx">            
            <student-info ng-repeat="user in users" user="user" on-click-ele="onChangeFoo()"></student-info>            
        </div>
</body>
</html>

Answer 2

不知怎的，我可以通过为指令创建单独的controller来管理这个，但不知道背后的理论，如果有人解释清楚，那将会非常有用。

JS

var app = angular.module('app', []);
app.controller('customDirEx', ['$scope', function ($scope) {
    $scope.users = [
        {
            name: 'ABC',
            rno: '100'
        },
        {
            name: 'DEF',
            rno: '200'
        }
    ];

    $scope.onChangeFoo = function() {
        console.log('test');
    }        
}]);

app.controller('StudentCtrl', ['$scope', function($scope){
    $scope.onInitEle();    
}]);

app.directive('studentInfo', function(){
    var directive = {};

    directive.scope = {
        user: '=user',
        onInitEle: '='
    };
    directive.restrict = 'EA';
    directive.template = '<div>Name: {{user.name}}<br>R.NO: {{user.rno}}</div>';
    directive.controller = 'StudentCtrl';

    return directive;
});

HTML

<body ng-app="app">
     <div ng-controller="customDirEx">            
            <student-info ng-repeat="user in users" user="user" on-init-ele="onChangeFoo"></student-info>            
     </div>
</body>

工作JSFiddle

如何在AngularJS指令中调用自定义函数

2 个答案: