Question

我有这样的指令

<div my-directive="htmlItem"></div>  //htmlItem is dynamic

我的指示

angular.module('myApp').directive('myDirective', [
    function () {
        return {
            restrict: "A",
            scope: {
                myDirective: '='
            },
            controller: myDirectiveCtrl
        };
    }]);


function myDirectiveCtrl($scope) {
    console.log($scope.myDirective)  => output html like <div>Product</div>

    //I want to add click event in my html so it becomes
    //<div ng-click="vm.clickProduct()">Product</div>
    //I do

    angular.element($scope.myDirective).find('div').attr('ng-click',  
    'vm.clickProduct()');           
}

当我从浏览器检查元素时，我在html中看到vm.clickProduct()但是当我点击它时，点击事件永远不会激活。有没有办法触发vm.clickProduct()？非常感谢！

Answer 1

你需要使用$ compile编译你的html来触发你点击你的按钮。像这样 $编译（yourHTML）（$范围）;

Answer 2

尝试使用link功能，如下所示：

＆＃13;

var myApp = angular.module('myApp', []);
myApp.controller('MyController',function(){});
myApp.directive('htmlItem', function() {
    return {
        restrict: "A",
        scope: {
            myDirective: '='
        },
        link: function(scope, element, attrs) {
          element.bind('click', function() {
            alert('you have clicked');
          })
        }
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController">
    <div html-item="">Click Me</div>
</div>

＆＃13;

Answer 3

myDirectiveCtrl有点击功能你应该提到控制器中的名称和控制器的别名名称vm定义为控制器的别名，所以控制器也需要

'vm.clickProduct（） - ＆gt;如果该模板位于Controller范围内，请使用clickProduct（）。另外使用链接中的函数调用Controller方法

在我的案例中如何在指令中设置click事件？

3 个答案: