Question

现在试图解决这个问题太久了。也许有人可以解释一下：

我正在试验自定义指令，并且作为练习我试图在自定义指令的控制器中创建一个方法，可以从视图中的一个简单按钮调用。但是，即使我可以将方法（使用控制台）视为隔离范围对象中的属性，也不会调用该方法。有什么想法吗？

HTML：

<my-dir>
    <p>My dir content</p>
    <p><button ng-click="hideMe()">Hide element with isolated scope</button></p>
</my-dir>

JS：

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

app.directive('myDir', function() {

    return {
        restrict: 'EA',
        scope: {},
        controller: ['$scope', function ($scope) {

            $scope.hideMe = function(){

                console.log('hideMe called');

            };

        }]
    };
})

Answer 1

你可以试试这个，

<强>指令：

var result = timeConverter.MyAwesomeTimeFunction();

<强> HTML：

 app.directive('myDir', function() {
      return {
        restrict: 'EA',
        scope: {},
        link: function($scope, element, attrs) {
          $scope.hideMe = function() {
            alert('hideMe called');
          }
        }
      }
    });

<强> DEMO

Answer 2

您必须使用template:属性在指令内声明模板，或使用.html

在外部templateUrl:"path/to/template.html"文件中声明模板

使用template :

的示例

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

app.directive('myDir', function() {
    return {
        restrict: 'EA',
        scope: {},
        template : '<p>My dir content</p><p><button ng-click="hideMe()">Hide me</button></p>',
        controller: ['$scope', function ($scope) {
            $scope.hideMe = function(){
                console.log('hideMe called');
            };
        }]
    };
})

使用templateUrl :

的示例

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

app.directive('myDir', function() {
    return {
        restrict: 'EA',
        scope: {},
        templateUrl : 'my-dir.tpls.html',
        controller: ['$scope', function ($scope) {
            $scope.hideMe = function(){
                console.log('hideMe called');
            };
        }]
    };
})

模板：my-dir.tpls.html

<p>My dir content</p>
<p><button ng-click="hideMe()">Hide me</button></p>

<强> HTML：

<my-dir></my-dir>

在控制器内调用自定义指令中的方法

2 个答案: