Question

如果我在我的指令中做了类似的事情：

template: '<button ng-click="Done()">DONE</button>'

那我在哪里放置我的$ scope.Done（）函数？我在这里的控制器中有它，但似乎没有工作

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body ng-app="myApp" ng-controller="myctrl">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
        <div mydiv></div>

        <script>
            angular.module("myApp", [])
            .controller("myctrl", function($scope) {
                $scope.Done = function() {
                    alert('Done');
                };
            });

            angular.module("myApp", [])
            .directive("mydiv", function() {
                return {
                    template: '<button ng-click="Done()">DONE</button>'
                };
            });
        </script>
    </body>
</html>

Answer 1

直接设置函数的好方法，你需要绑定它。

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body ng-app="myApp" ng-controller="myctrl">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
        <div mydiv on-done="Done()"></div>

        <script>
            angular.module("myApp", [])
            .controller("myctrl", function($scope) {
                $scope.Done = function() {
                    alert('Done');
                };
            });

            angular.module("myApp", [])
            .directive("mydiv", function() {
                return {
                    scope: {
                        onDone: '&'
                    },
                    template: '<button ng-click="onDone()">DONE</button>'
                };
            });
        </script>
    </body>
</html>

这是一个有效的例子：
http://jsfiddle.net/ADukg/17585/

Answer 2

做这样的事情符合你的目的。试一试..

angular.module("myApp", [])
            .directive("mydiv", function() {
                return {
                    template: '<button ng-click="Done()">DONE</button>',
                    link: function (scope, element, attrs) {
                    scope.Done = function () {
                         alert('Done');
                    }
            }
                };
            });

从控制器中删除以下功能。

 $scope.Done = function() {
                    alert('Done');
                };

何处放置AngularJS指令模板函数

2 个答案: