Question

我正在重构旧项目以使用自定义指令，我已经遇到了问题。我只是想制作一个简单的指令并从那里构建。我的指令链接函数中有一个logger函数，它只运行一个console.log。我不确定我在这里缺少什么，我确信这很简单。这是我的指示：

'use strict';

new

它的HTML模板只是：

(function() {
    angular
        .module('sigFig')
        .directive('myDirective', myDirective);

    function myDirective(sigFigFactory) {
        var directive = {
            restrict: 'E',
            replace: 'true',
            templateUrl: 'Directives/directiveTemplate.html',
            link: link,
            compile: compile
        };
        return directive;

        function link(scope, element, attrs) {
            scope.logger = function() {
                console.log('DING!!!');
            }
        }
        function compile(scope, element, attrs) {
            console.log('I AM A COMPILE FUNCTION');
        }
    }
})();

我在我的HTML中调用它：

<button ng-click="logger()">CLICK ME</button>

按钮出现，我的编译中的console.log工作，但ng-click没有。我错过了什么？提前谢谢！

Answer 1

将范围添加到指令变量：scope:{},

 function myDirective(sigFigFactory) {
        var directive = {
            scope:{},
            restrict: 'E',
            replace: 'true',
            templateUrl: 'Directives/directiveTemplate.html',
            link: link,
            compile: compile
        };
        return directive;

Answer 2

我从未创建过没有控制器的角度应用程序。所以我很肯定这是你的问题。

带控制器的

Example代码。

HTML：

  <body ng-app='sigFig' ng-controller='ctrl'>
    <my-directive></my-directive>
  </body>

JS：

(function() {
        angular.module('sigFig', [])
        .controller('ctrl', function($scope){
            $scope.itemH = 'hahaha'
        })
        .directive('myDirective', myDirective);

        function myDirective() {
            return {
                restrict: 'E',

                template: '<button ng-click="logger()">{{item}}</button>',
                link: function link(scope, element, attrs) {
                    scope.item = "Logger Click Me";
                    scope.logger = function() {
                        alert('logger')
                    }
                }
            };

            function compile(scope, element, attrs) {
                console.log('I AM A COMPILE FUNCTION');
            }
        }
    })();

ANGULAR：在自定义指令中单击时不调用链接函数

2 个答案: