web-dev-qa-db-ja.com

ng-clickはディレクティブのテンプレート内では機能しません

ここに角度のあるノブ。質問とサブ質問のツリーを再帰的に表示するディレクティブを作成しています。スコープ内の関数を呼び出すテンプレート内のリンクを使用しています。何らかの理由で、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',
    terminal: true,
    scope: { value: '=' },
    template: tpl,
    link: function(scope, element, attrs) {
        $compile(element.contents())(scope.$new());
    }
  };
});

これを理解する上で助けていただければ幸いです。

angularjsangularjs-directiveangularjs-scope
38
Madhusudhan

スコープの問題があります。ディレクティブでscope: { 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',
    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());
    }
  };
});

ng-clickでquestionをターゲットにしていることに注目してください。これは、コールバック関数の引数をターゲットにする方法です。また、on-editでchoicesディレクティブに渡す方法、subQuestionをターゲットにしていることに注意してください。これは、questionの内部でngRepeatがすでに予約されているため、2つを区別する必要があるためです。

これはおそらくこれまでAngularで学ぶのが最も難しい概念でした。コントローラ、ディレクティブ、およびその他のディレクティブ間でスコープがどのように機能するかを理解したら、Angularの世界はあなたのものです。 :)

38
Langdon

これは範囲の問題です。現在のスコープのeditQuestionおよびremoveQuestionメソッドを呼び出すディレクティブのngクリック。これらのメソッドは、ディレクティブを含むモジュール（親スコープ）で定義されているため、ディレクティブのスコープには存在しません。

ディレクティブと親の間にバインディングを確立したいので、ディレクティブがngClick関数を呼び出すと、ディレクティブをホストしているモジュールで起動します。

ディレクティブ自体でメソッドを定義するか、または ディレクティブ定義オブジェクト のscopeセクションを使用してバインディングをセットアップできます。

異なるスコープ（コンソールへの出力）でのng-clickイベントの発生を説明するプランカーです。

http://plnkr.co/edit/9XfXCpU6lhUOqD6nbVuQ?p=preview

7
Jason

LangdonのMay10 '13の答えは正しいです。 デモンストレーションのために、Langdonのフィドルコードを合理化し、148行のangularから23行のangular。
また、関数呼び出しメソッドを介してパラメーター値をMouseEventオブジェクトとして渡し、関数でその値を取得できる機能を追加しました。

ここに [〜＃〜] jsfiddle [〜＃〜] があり、その後にコードとクレジットが続きます。これは非常に簡単です。

http://jsfiddle.net/BeyondLogical/evjzoo30/

-Html--

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

--AngularJS--

_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());
        }
    };
});
_

クレジット、
Langdon- ng-clickはディレクティブのテンプレート内では機能しません

Mark Rajcok- AngularJSはディレクティブから$ eventを取得します （LangdonはMark Answersの質問を支援します）

PavanAsTechie- 非ディレクティブコントローラー関数内のアクセス属性値 およびPavanのJSFIDDLE- http://jsfiddle.net/brettdewoody/FAeJq/ （特にPavanのフォローコードの行）：alert(obj.target.attributes.data.value);

2
user3777549

これに来て、実行していないコードでそれをしようとしている人にはin your directive、オプションを使用していないことを確認してください置換。

例えば：

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");
      }
    }
  };
}
1
Ryan Knell