0

編集：jsfiddleを参照してください

ディレクティブを介してテキストとして表示するアイテムのリストがあります（ここではすべてが簡略化されており、単なるテキストよりも複雑ですが、原則として同じです）。そのようです：

<body ng:controller="BaseController">
    ...
    <div ng:controller="Controller">
        <itemdir ng:repeat="item in items" item="item"></item>
    </div>
    ...
    <input ng:model="currentItem" />
</body>

クリックすると、クリックしたアイテムの内容が入力に表示されます。

items配列であり、currentItemBaseControllerスコープに属します。

ディレクティブは、BaseControllerスコープのプロパティ（currentItemと呼ばれる）を変更するng：clickを使用してテンプレート（以下を参照）を生成します。ただし、何もしません（入力値は新しい現在のアイテムに変更されません）。Batarang for Chromeでは、currentItemプロパティが表示され、ディレクティブのスコープで変更されていますが、BaseControllerのスコープでは変更されていないことがわかります。

module.directive 'itemdir', () ->
    restrict: 'E'
    replace: true
    template: '<div ng:click="show(item)"></div>'
    controller: 'EditorController'
    scope: 
        item: '=item'
    link: ($scope, $element, $attrs) ->
        update = -> 
                    $element.html($scope.item)

        $scope.$watch('item', update)

プロパティを変更するためshow(item)に、BaseControllerのスコープで定義されているメソッドを試しました。このメソッドはitemパラメーターのみを$scope.currentItemに割り当てます。

show(item)ng：clickの値をからに変更しても機能しませんcurrentItem = item

これがスコープの問題であることは知っていますが、それでも詳細をすべて把握しているわけではないようです。

4

1 に答える 1

3

したがって、提供された jsFiddle を見るとBaseController、ディレクティブとトップ div の両方で使用されていることがわかります。show(item)これにより、ディレクティブによって生成されたトップボタンと HTML からメソッドを呼び出すことができたため、微妙な問題が発生しましたが、これらのメソッドは異なるコントローラーで呼び出され、異なるスコープに書き込んでいました。

ここで、ディレクティブでの BaseController の使用が意図的であったかどうか (ディレクティブに EditorController があるという質問) を質問から推測するのは困難ですが、これは偶然であり、div 用に BaseController を保持したいと考えています。分離されたスコープを作成するときは、特別な注意が必要なディレクティブからメソッドを呼び出します(名前が示すように、それらは実際には分離されているため、親スコープから継承されません)。show基本的に、メソッドが分離されたスコープで使用可能であり、親スコープの正しいメソッドを指していることを確認する必要があります。

あなたの例を取ると、次のようにディレクティブを定義します（注意してくださいshow : '&ngClick'）：

module.directive('itemdir', function () {
  return {
    restrict:'E',
    replace:true,
    template:'<div ng:click="show(item)" class="clickable"></div>',
    scope : {item : '=', show : '&ngClick'},
    link:function ($scope, $element, $attrs) {
      $element.html($scope.item)
    }
  }
});

動作中の jsFiddle は次のとおりです: http://jsfiddle.net/pkozlowski_opensource/M9B93/

将来的には、Chrome 用の AngularJS Batarang 拡張機能 ( http://blog.angularjs.org/2012/07/introducing-angularjs-batarang.html ) がスコープとそのコンテンツを視覚化できるため、便利であることがわかるかもしれません。

于 2012-08-19T15:40:01.413 に答える