0

属性との双方向バインディングを持つディレクティブがあります。リンク機能で属性を再割り当てしたい。ただし、これは参照を壊します。

これを行う適切な方法は何ですか？

<div ng-app="zippyModule">
    <div ng-controller="Ctrl3">Title:
        <input ng-model="title">
        <div class="zippy" zippy-title="obj">{{obj.a}}</div>
    </div>
</div>

Javascript:

function Ctrl3($scope) {
    $scope.obj = {
        a: "a",
        b: "b"
    };
}

angular.module('zippyModule', [])
    .directive('zippy', function () {
    return {
        scope: {
            title: '=zippyTitle'
        },
        link: function (scope, element, attrs) {
            title = {
                a: "C",
                b: "D"
            };
        }
    };
});

http://jsfiddle.net/6HcGS/617/

4

3 に答える 3

0

ここでいくつかのことが間違っています。

1) 入力を閉じます:<input ng-model="title">

2）モジュールはrestrict明示的でなければならず、通常はテンプレートを使用して目的地を取得します。と呼ばれる変数を使用して、分離されたスコープをセットアップしたと述べた後、このスコープに存在しないものtitleを呼び出します。obj

angular.module('zippyModule', [])
.directive('zippy', function () {
return {
    restrict: 'A',
    scope: {
        title: '=zippyTitle'
    },
    template: 'TEMPLATE = {{title}}',
    link: function (scope, element, attrs) {
        scope.title = {
            a: "C",
            b: "D"
        };
    }
  };
});

3) ディレクティブを間違って呼び出します。それは<div zippy .... クラスであってはなりません。

楽しみのためのフォーク フィドル。例としていくつかのものを残したことに注意してください。

http://jsfiddle.net/RomanKolo/j88CG/

編集::設定した場合、クラスを使用できますrestrict: 'C'

于 2014-07-24T21:28:32.000 に答える
-1

必要なもの:

link: function (scope, element, attrs) {
        scope.title = {
            a: "C",
            b: "D"
        };
    }

scope.title に注意してください。そうしないと、「タイトル」はスコープ内のタイトル オブジェクトへの参照を持たない単なるグローバル オブジェクトになります。

于 2014-07-24T21:21:11.783 に答える