angularjs – ng-click不能在指令的模板中工作

发布时间：2020-12-17 08:39:42 所属栏目：安全来源：网络整理

导读：这里的角度。我创建一个指令，递归地显示一个问题和子问题树。我使用模板中的链接调用范围内的函数。由于某种原因，它不会调用editQuestion()方法。这里是代码和小提琴http://jsfiddle.net/madhums/n9KNv/ HTML： div ng-controller="FormCtrl" questions v

这里的角度。我创建一个指令，递归地显示一个问题和子问题树。我使用模板中的链接调用范围内的函数。由于某种原因，它不会调用editQuestion()方法。

这里是代码和小提琴http://jsfiddle.net/madhums/n9KNv/

HTML：

<div ng-controller="FormCtrl">
  <questions value="survey.questions"></questions>
</div>

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',attrs) {
        $compile(element.contents())(scope.$new());
    }
  };
});

任何帮助理解这一点将不胜感激。

您有范围问题。由于您在指令中使用范围为{value：’=’}的独立作用域，它不再能访问具有editQuestion的控制器作用域。

你需要传递editQuestion到你的指令的范围，所以它知道如何调用它。这通常很容易，但是因为你的无限递归指令结构，选择可以包括问题，它有点棘手。这是一个工作的小提琴：

http://jsfiddle.net/n9KNv/14/

HTML现在包括对editQuestion的引用：

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

你的问题指令现在期望在其范围内的onEdit属性：

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',scope: { value: '=',onEdit: '&' },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',attrs) {
        $compile(element.contents())(scope.$new());
    }
  };
});

请注意我们如何在ng点击中定位问题。这是如何在回调函数中定位参数。另外请注意，如何在编辑中我们传递给您的选择指令，我们的目标是subQuestion。这是因为问题已经保留在ngRepeat内部，所以我们需要区分两者。

这可能是我到目前为止在Angular学习的最难的概念。一旦你理解了控制器，指令和其他指令之间的作用域，Angular的世界是你的。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!