6

コールバックを属性として受け入れるディレクティブを作成しました。例:

<my-directive callback-expression="someFunction()"> </my-directive>

ディレクティブは再利用可能であるため、isolate スコープを指定しました。callback-expressionその属性が設定されているかどうかに基づいて、ディレクティブ内にボタンを表示したい。

App.directive('myDirective', function(){
  restrict: 'E',
  scope:    {
              callbackExpression: '&'
            },
  template: '<button ng-show="!!callbackExpression">Fire callback</button>'
});

問題は、式が空であっても関数であることです。

console.log($scope.callbackExpression)属性を空白にすると、次のようになります。

function (locals) {
  return parentGet(parentScope, locals);
}

私の現在の解決策は、リンク関数の先頭に次の行を配置することです。

if (attributes.callbackExpression) scope.callbackButton = true

次にng-show_callbackButton

その余分な行とスコープのプロパティを必要としない代替手段はありますか?

4

2 に答える 2

1

ディレクティブに挿入できる $attrs オブジェクトを使用して、この情報を取得できます。

マークアップ:

  <body ng-app="myApp" ng-controller="MyController">
    <my-directive text="No Expression"></my-Directive>
    <my-directive text="Expression" callback-expression="myCallback()"></my-Directive>
  </body>

JS:

app.directive('myDirective', function(){

  return {
    restrict: "E",
    scope: {
      text: '@',
      callbackExpression:'&'
    },
    templateUrl: "partial.html",
    link: function($scope, $elem, $attrs) {
      $scope.expressionCalled = false;
      if ($attrs.callbackExpression) {
        $scope.expressionCalled = true;
      }
    }
  }

});

この例では、動作する plunk を作成しました: http://plnkr.co/edit/K6HiT2?p=preview

于 2014-03-28T16:49:19.910 に答える