12

次の安定した AngularJS のリリースの時点で、アプリケーションをバージョン1.0.8から1.2に移行しています。

AngularJS 1.0.8では、 のようなディレクティブに分離スコープを設定することができましたfollow。test()ディレクティブは、コントローラーの関数の代わりに独自の関数を使用しtest()ます。

HTML

<my-dialog property="something">
    <button ng-click="test()">Load Test</button>
    Check out the test: "{{ testMessage }}"
</my-dialog>

Javascript

  .controller('Ctrl', function(scope) {
    scope.test = function () {
       scope.testMessage = 'CTRL Test loaded! Whooops.';
    }
  })

  .directive('myDialog', function() {
    return {
      restrict: 'E',
      scope: {
          property: '='
      },
      link: function(scope) {
          scope.test = function () {
            scope.testMessage = 'Isolated Test loaded. Yes!';
          }
      }
    };

AngularJS 1.2では、この動作は機能しなくなりました。ボタンをクリックすると、コントローラーのtest()関数が起動します。

この jsFiddle の比較を参照してください。

正確には何が変更され、以前の動作を再現するにはどうすればよいですか?

ノート

ディレクティブ テンプレートを追加の HTML ファイル内に配置するか、それを文字列としてコンパイルして動作させることができることがわかりました ( jsFiddle )。 HTMLファイルは面倒です。

編集

共有するプロパティが他にない場合、@elclanrの答えはうまく機能します。任意のプロパティを渡すように jsFiddleを更新しました。今、どのように進めればよいですか？

4

3 に答える 3

4

設定scope: trueすると問題が解決するはずです。http://jsfiddle.net/rug3J/1。また、依存関係が注入されていscopeない場合ではなく、規則に従って名前を付けることをお勧めします。$scope

.directive('myDialog', function() {
  return {
    restrict: 'E',
    scope: true,
    link: function(scope) {
      scope.test = function () {
        scope.testMessage = 'Isolated Test loaded. Yes!';
      }
    }
  };
于 2013-11-13T02:22:09.030 に答える
0

通常のマークアップをディレクティブ固有のテンプレートおよび関数と組み合わせるには、次のようにtranscludeオプションを使用する必要があります。

参照: jsFiddle

HTML

<div ng-app="myApp">
    <div ng-controller="Ctrl">
        <my-directive property="{{ something }}">
            <p>{{ text }}</p>
        </my-directive>
    </div>
</div>

Javascript

.controller('Ctrl', ['$scope', function($scope) {
    $scope.text = 'This is a controllers text.';
    $scope.something = 'This is another controllers text.';
}])
.directive('myDirective', function() {
    return {
        restrict: 'E',
        transclude: true,
        template: '<button ng-click="test()">Fire directives function</button><div ng-transclude></div><p>{{ property }}</p>',
        scope: {
            property: '@'
        },
        link: function(scope) {
            scope.test = function () {
                scope.property = 'Loaded directives text.';
            }
        }
    };
});

これで問題なく動作しますが、スコープの既存のプロパティをオーバーライドできないことに注意してください。

于 2013-11-14T00:15:18.733 に答える