Question

我正在尝试创建一个指令＆amp;附上ng-click与模板。所以我希望如果我点击模板，它将记录来自scope.scrollElem函数的语句，这不会发生。

我能够创建指令，但它没有响应click。

设计approch

如果此指令附加到此DOM元素，它将在＆amp;之前插入div元素。在这个DOM之后。这个插入的div有一个图像（想要附加ng-click到这个图像），它将响应一个事件。

指令模块

//rest of code
return {
    restrict: 'EAC',
    controllerAs: 'vm',
    controller: _controller,
    link: _link
 }
};

链接功能

function _link(scope, elem, attrs) {
    console.log("Method Executing:Navigator._link");
    var params = scope.$eval(attrs.navparams);
    //Separate function is used to create template as 
    //the template is dependent on params value 
    scope.createNavigatorTemplate = _createNavigatorTemplate(scope, elem, params);
    scope.scrollElem = function() {
            console.log("abc");
        }
}

创建模板

function _createNavigatorTemplate(scope, elem, params, $compile) {
    params.forEach(function(item) {
        var _template = angular.element('<div class="' + item.class + '"></div>');
        var _img = angular.element('<img>').attr({
            src: item.image,
            alt: item.imageAlt,
            'ng-click':"scrollElem()" // attaching ng-click here
        });
         //appending template with element
         //_img.bind('ng-click',scope._scrollElem) //tried this but not working
        _appendTemplate(elem, item.dir, _template);
    })
}

我检查了这个SO question，但仍然无法解决问题。

Answer 1

您需要在链接之前生成模板，以便正确编译：

compile: function compile(tElement, tAttrs, transclude) {
  return {
    pre: function preLink(scope, iElement, iAttrs, controller) {
      var params = scope.$eval(attrs.navparams);
      //Separate function is used to create template as 
      //the template is dependent on params value 
      scope.createNavigatorTemplate = _createNavigatorTemplate(scope, elem, params);
      scope.scrollElem = function() {
        console.log("abc");
      }
    },
    post: function postLink(scope, iElement, iAttrs, controller) {
      console.log("Method Executing:Navigator._link");

    }
  }
}

根据您的方法，您似乎正在寻找具有ngTransclude的e指令。

基本上你会创建一个指令，让你的divs包含图像，并在它之间转换内容，如：

<div><img></div>
<div ng-translude>Content will be added here</div>
<div><img></div>

您可以使用<my-directive>My content</my-direcive>

，输出将是

<div><img></div>
<div ng-translude>My Content</div>
<div><img></div>

Answer 2

您需要在模板中添加div

function _createNavigatorTemplate(scope, elem, params, $compile) {
params.forEach(function(item) {
    var _template = angular.element('<div class="' + item.class + '"</div>');
    var _img = angular.element('<img>').attr({
        src: item.image,
        alt: item.imageAlt,
         template: '<div class="arrow-left" ng-click="scrollElem()"></div>',
    });
     //appending template with element
     //_img.bind('ng-click',scope._scrollElem) //tried this but not working
    _appendTemplate(elem, item.dir, _template);
})

}

使用angular js指令附加ng-click

2 个答案: