使用控制器作为语法角度JS指令NG-点击不工作 [英] Angular js directive using controller as syntax ng-click not working

问题描述

我有麻烦了指令的click事件与一个孤立的范围使用控制器语法角度1.3 code的指令是如下工作：

I am having trouble getting a click event in a directive with an isolated scope to work using "controller as" syntax in Angular 1.3 the code for the directive is as follows:

myDirectives.directive('gsphotosquare', dirfxn);

function dirfxn() {
    var directive = {
        replace: false,
        scope: {
            photoInfo: '=',
            photoBatchNum: '=',
            thumbnailwidth: '='
        },
        restrict: 'EA',
        controller: Ctrller,
        controllerAs: 'ctrl',
        template: '<div ng-click="ctrl.squareClicked()">test</div>',
        //templateUrl: 'views/directives/gsphotosquare.html',
        bindToController: true, // because the scope is isolated
        link: linkFunc //adding this didn't help
    };
    return directive;
}

function Ctrller() {
    var vm = this;

    vm.squareClicked = function () {
        alert('inside clickhandler for gsphotosquare directive');
    };
}

function linkFunc(scope, el, attr, ctrl) {

    el.bind('click', function () {
        alert('inside clickhandler for gsphotosquare directive');
    });
}

和这里的指令是如何在DOM中：

And here is how the directive is used in the DOM:

 <span class="input-label">General Site Photos</span>
    <div class=" item row">
    <gsphotosquare photo-info="mt.photos.v1f1[0]" photo-batch-num="mt.photoBatchNum" ></gsphotosquare>
    <gsphotosquare photo-info="mt.photos.v1f1[1]" photo-batch-num="mt.photoBatchNum" ></gsphotosquare>
    <gsphotosquare photo-info="mt.photos.v1f1[2]" photo-batch-num="mt.photoBatchNum" ></gsphotosquare>
   <gsphotosquare photo-info="mt.photos.v1f1[3]" photo-batch-num="mt.photoBatchNum" ></gsphotosquare>
</div>

任何原因点击渲染指令的想法不显示警报？

Any ideas why clicking on the rendered directive doesn't show the alert?

推荐答案

尝试有点不同定义控制器：

Try defining your controller a little differently:

myDirectives.controller('Ctrller', Ctrller);

然后在您的指令：

then in your directive:

controller: 'Ctrller as ctrl',

这篇关于使用控制器作为语法角度JS指令NG-点击不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！