Angularjs ng点击不'；t在指令模板内工作

这里有个角。我正在创建一个指令，以递归方式显示问题和子问题树。我在模板中使用一个链接，该链接调用范围内的函数。出于某种原因，它不调用

editQuestion（）

方法

这是密码和小提琴

HTML:

Javascript:

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

function FormCtrl ($scope) {
  $scope.editQuestion = function (question) {
    alert('abc');
  };
  $scope.survey = {
    // ...
  }
}


app.directive('questions', function($compile) {
  var tpl = '<ol ui-sortable' +
    ' ng-model="value"' +
    ' class="list">' +
    '  <li ng-repeat="question in value | filter:search"' +
    '     <a href="" class="question">' +
    '       {{ question.name }}' +
    '     </a>' +
    '     <span class="muted">({{ question.type }})</span>' +
    '     <a href="" class="danger" ng-click="removeQuestion(question)">remove</a>' +
    '     <a href="" class="blue" ng-click="editQuestion(question)">edit</a>' +
    '     <choices value="question.choices"></choices>' +
    '  </li>' +
    '</ol>';

  return {
    restrict: 'E',
    terminal: true,
    scope: { value: '=' },
    template: tpl,
    link: function(scope, element, attrs) {
        $compile(element.contents())(scope.$new());
    }
  };
});

app.directive('choices', function($compile) {
  var tpl = '<ul class="abc" ng-repeat="choice in value">'+
    '  <li>' +
    '    {{ choice.name }}' +
    '    <span class="muted">' +
    '      ({{ choice.questions.length }} questions)' +
    '    </span>' +
    '' +
    '    <a href=""' +
    '      ng-click="addQuestions(choice.questions)"' +
    '      tooltip="add sub questions">' +
    '      +' +
    '    </a>' +
    '' +
    '    <questions value="choice.questions"></questions>'
    '  </li>' +
    '</ul>';

  return {
    restrict: 'E',
    terminal: true,
    scope: { value: '=' },
    template: tpl,
    link: function(scope, element, attrs) {
        $compile(element.contents())(scope.$new());
    }
  };
});

var-app=angular.module（'myApp'，[]）；
函数FormCtrl（$scope）{
$scope.editQuestion=函数（问题）{
警报（“abc”）；
};
$scope.survey={
// ...
}
}
应用程序指令（'问题'，函数（$compile）{
var tpl=“”+
“这是作用域的问题。指令的ng单击调用当前作用域的editQuestion&removeQuestion方法，这些方法在指令的作用域中不存在，因为它们是在包含指令的模块（即父作用域）中定义的

您希望在指令和父指令之间建立绑定，因此，当指令调用ngClick函数时，它将在承载该指令的模块上激发

您可以在指令本身中定义方法，也可以通过指令的范围部分设置绑定

下面是一个plunker，它演示了在不同的作用域（输出到控制台）触发ng click事件

您遇到了作用域问题。由于您在指令中将隔离作用域与
作用域：{value:'='}
一起使用，因此它不再具有访问具有
编辑问题的控制器作用域的权限

您需要将
editQuestion
传递到指令的作用域，以便它知道如何调用它。这通常非常简单，但由于您的无限递归指令结构中的选项可以包含问题，因此它会变得有点棘手。下面是一个实用的小提琴：


HTML现在包括对
editQuestion
的引用：

<div ng-controller="FormCtrl">
    <questions value="survey.questions" on-edit="editQuestion(question)"></questions>
</div>

注意我们是如何在
ng click
中定位
question
的。这是如何在回调函数中定位参数的。还要注意我们是如何在
on edit
中传递给您的
choices
指令的
子问题中定位的。这是因为
question
已保留在
ngRepeat
，因此我们需要区分两者

这可能是迄今为止我在Angular学习的最难的概念。一旦您了解了控制器、指令和其他指令之间的作用域，Angular的世界就属于您了。：）兰登2013年5月10日的答案是正确的。为了演示，我简化了兰登的小提琴代码，并将其从148行角度代码减少到23行角度代码。

我还添加了一些功能，可以通过函数调用方法将参数值作为MouseEvent对象传递，并在函数中检索所述值。


下面是代码和学分，应该很容易理解。






--Html--



--安格拉斯--

var-app=angular.module（'myApp'，[]）；
函数FormCtrl（$scope）{
$scope.editQuestion=函数（ev，问题）{
//ev返回一个MouseEvent对象
警报（“ev:+ev”）；
//这是如何在下面的span标记中设置“data”属性的
警报（“ev数据：+ev.target.attributes.data.value”）；
};
}
应用程序指令（'问题'，函数（$compile）{
var tpl=
“点击我”；
返回{
限制：'E'，
终端：是的，
作用域：{onEdit:'&'}，
模板：第三方物流，
链接：函数（范围、元素、属性）{
$compile（element.contents（））（scope.new（））；
}
};
});

积分到，

兰登-


Mark Rajcok-（Langdon还获得了询问问号答案的帮助）


PavanAsTechie-和Pavan的JSFIDLE-（特别是Pavan的以下代码行）：
警报（obj.target.attributes.data.value）；
对于任何使用指令中未运行的代码的人，请检查是否未使用替换选项

例如：

angular.module（'app'）.directive（'myDirective'，function（）{
返回{
模板：“”，
范围：{
选项：“=”
},
replace:true，//谢谢。我把ng click=“onEdit（）”添加到指令中弄错了。@Langdon感谢您的分享。这帮助我解决了问题。在我的模板中，我的指令中有Button，它不断给出语法分析器错误，直到我在看到您的示例后取出twowaybound.value周围的大括号。
<div ng-controller="FormCtrl">
    <questions value="survey.questions" on-edit="editQuestion(question)"></questions>
</div>

app.directive('questions', function($compile) {
  var tpl = '<ol ui-sortable' +
    ' ng-model="value"' +
    ' class="list">' +
    '  <li ng-repeat="question in value | filter:search"' +
    '     <a href="" class="question">' +
    '       {{ question.name }}' +
    '     </a>' +
    '     <span class="muted">({{ question.type }})</span>' +
      '     <a href="" class="blue" ng-click="onEdit({question: question})">edit</a>' +
      '     <choices value="question.choices" on-edit="onEdit({question: subQuestion})"></choices>' +
    '  </li>' +
    '</ol>';

  return {
    restrict: 'E',
    terminal: true,
      scope: { value: '=', onEdit: '&' },
    template: tpl,
    link: function(scope, element, attrs) {
        $compile(element.contents())(scope.$new());
    }
  };
});

app.directive('choices', function($compile) {
  var tpl = '<ul class="abc" ng-repeat="choice in value">'+
    '  <li>' +
    '    {{ choice.name }}' +
    '    <span class="muted">' +
    '      ({{ choice.questions.length }} questions)' +
    '    </span>' +
    '' +
      '    <questions value="choice.questions" on-edit="onEdit({subQuestion: question})"></questions>'
    '  </li>' +
    '</ul>';

  return {
    restrict: 'E',
    terminal: true,
      scope: { value: '=', onEdit: '&' },
    template: tpl,
    link: function(scope, element, attrs) {
        $compile(element.contents())(scope.$new());
    }
  };
});

<div ng-controller="FormCtrl">
    <questions on-edit="editQuestion(ev,question)" ></questions>
</div>

var app = angular.module('myApp', []);
function FormCtrl ($scope) {
    $scope.editQuestion = function (ev,question) {
        //ev returns a MouseEvent object
        alert("ev: " + ev);
        //this is how you get the 'data' attribute set in the span tag below
        alert("ev-data: " + ev.target.attributes.data.value); 
    };
}
app.directive('questions', function($compile) {
    var tpl = 
    '<span ng-click="onEdit({ev: $event, myName: question})" data="This sentence would probably be replaced with a mustache brace parameter, example: {{someValue}}, returning a value from the scope." style="cursor:pointer;">Click Me</span>';
    return {
        restrict: 'E',
        terminal: true,
        scope: { onEdit: '&' },
        template: tpl,
        link: function(scope, element, attrs) {
            $compile(element.contents())(scope.$new());
        }
    };
});

angular.module('app').directive('myDirective', function () {
return {
    template: '<div ng-click="clicked()"></div>',
    scope: {
      options: "="
    },
    replace: true, //<---- Change this to false
    restrict: 'E',
    controller: function ($scope) {

      $scope.clicked = function(){
        console.log("Clicked");
      }
    }
  };
}