6

問題のディレクティブはこの男です: 属性に基づくディレクティブの動的テンプレート?

とにかく、これが私が達成しようとしていることです。

この<titlebar>ディレクティブは、 という属性を取ることができますedit-button。これが存在する場合、ボタンがクリックされたときに、コントローラーに $scope 変数を設定して、ボタンの表示/非表示を切り替えて項目を削除/編集したいと考えています。

たとえば$scope.currentlyEditting = true;、ディレクティブで設定した場合、これをコントローラーに関連付けてから、ng-showコントロールの表示/非表示に使用します。そのデータをコントローラーに取り込む方法がわかりません。

titleBar ディレクティブ:

robus.directive("titlebar", function() {
  return {
    restrict: "E",
    template: "<header class='bar-title' ng-class='{\"sub-view\": view}'>"+
              "<a class='button' ng-click='goBack()' ng-show='back'><i class='icon-arrow-left'></i> Back</a>" +
              "<h1 class='title' ng-transclude>" +
              "<span class='sub-title' ng-show='view'>{{view}}</span></h1>" +
              "<a class='button' ng-click='showEdit()' ng-show='edit'>Edit</a>" +
              "</header>",
    scope: {
      view: '@view',
      edit: '@editButton',
      back: '@backButton'
    },
    transclude: true,
    replace: true,
    link: function ($scope, $element, attrs, ctrl) {
      // $scope.$apply();
    },
    controller: function($scope, $element, $attrs, $location, $routeParams) {
      /* simple back button implementation */
      $scope.goBack = function() {
        history.back(-1)
      }

      // $scope.showEdit = function() {
      //   $scope.currentlyEditting = true;
      // }
    }
  }
});
4

2 に答える 2

7

これを行うには、いくつかのオプションがあります。

分離スコープを作成する代わりに、$scope.$eval(attrs.editButton)(またはview、またはbackButton) を使用して、ディレクティブから属性を処理できます。次に、作業しているスコープに関係なく、変数を設定して関数を呼び出すことができます。

分離スコープを引き続き使用したい場合は&、編集モードを切り替えることができる関数を渡すこともできます。

これは次のように行われます。

// In the directive
template: '...<a href="" ng-click="toggleEdit()">Edit</a>...',
scope: {
  ...
  toggleEdit: '&',
  ...
}

// In the HTML (or directive template)
<titlebar ... toggle-edit="toggleEditMode()" ...>...</titlebar>

// In the controller (ngController, not directive controller)
$scope.toggleEditMode = function() {
  $scope.editMode = !$scope.editMode;
}

最後に$scope.$parent、ディレクティブの分離スコープから親スコープにアクセスするために使用することもできます。ディレクティブとコントローラーの間に密結合が作成されるため、これはお勧めしませんが、オプションです。

于 2013-06-28T23:56:34.973 に答える
1

親コントローラーに戻したいと思います。スコープ属性では、1 つの方法である "@" バインディングを使用します。「=」を使用して 2 つの方法をバインドできます。これを示すためにプランカーを作成しました: http://plnkr.co/edit/HBPCST?p=preview

ディレクティブ内に保持する必要がある場合に備えて、その例も示しました。

于 2013-06-28T23:26:28.880 に答える