angularjs - AngularJs Directive 两种方式绑定：如何保留引用？

Question

我有一个指令，它具有与属性的双向绑定。我想重新分配链接功能中的属性。但是，这会破坏参考。

这样做的正确方法是什么？

<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/

Answer 1

尝试这个：

html

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

脚本

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

angular.module('zippyModule', [])
    .directive('zippy', function () {
    return {
        scope: {
            zippyTitle: '='
        },
        link: function (scope, element, attrs) {
            scope.zippyTitle.a = 'Test Title';
        }
    };
});

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

Answer 2

这里有几件事是错误的。

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'

Answer 3

你需要：

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

注意 scope.title 东西，如果你不这样做，“title”只是一个全局对象，没有引用你在范围内的 title 对象。