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

【问题标题】：AngularJs Directive two way binding: How to preserve reference?AngularJs Directive 两种方式绑定：如何保留引用？
【发布时间】：2014-07-24 20:57:01
【问题描述】：

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

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

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

【问题讨论】：

title 不在 ng-model 的指令范围内，不确定您要做什么

标签： angularjs angular-ngmodel angular-directive

【解决方案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/

【讨论】：

如果对象很大，我不想一键分配新值。有没有更好的办法？

【解决方案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'，你可以使用类

【讨论】：

【解决方案3】：

你需要：

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

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

【讨论】：