Question

我已经创建了一个指令来理解翻译和隔离范围。这是HTML：

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <div>
            <input type="text" ng-model="name" />
            <input type="number" ng-model="friendCount" />
        </div>
        <my-friends name="{{name}}">
            <p>Hi, I'm {{name}}, and I have {{friendCount}} friends</p>
        </my-friends>
    </div>
</div>

指令：

var app = angular.module('myApp', []);

app.controller('MyCtrl', function ($scope) {
    $scope.name = "John Doe";
    $scope.friendCount = 3;
});

app.directive('myFriends', function () {
    return {
        restrict: 'E',
        replace: true,
        template: '<div>' +
            '    <h3> Isolated Scope: {{name}}</h3>' +
            '    <div ng-transclude></div>' +
            '</div>',
        transclude: true,
        scope: {
            name: '@'
        },
        link: function (scope, element, attrs) {
            scope.name = "Anderson";
        }
    }
});

打开这个小提琴：JsFiddle

我有两个问题：

为什么指令模板中的{{name}}表示“John Doe”而不是“Anderson”？我希望它是Anderson，因为name属性是原型继承的，只要在链接函数中写入它，就应该失去祖先的连接。
它似乎是正确的转换，但为什么它会在开发工具控制台中抛出错误错误：[ngTransclude：orphan]？它可能是我正在使用的角度版本吗？

非常感谢任何帮助。

这是小提琴：JsFiddle

更新

转换错误是由于错误加载角度两次造成的。

使用@绑定时，您可以在初始摘要周期完成后覆盖name inside指令，例如在单击处理程序或其他内容中。但是，只要更改父作用域的name属性，它就会被覆盖。

关于@绑定的问题是我对孤立范围的误解。它的工作方式与示例中的方式相同。 隔离范围不是从父类原型继承的。 @绑定的含义（也称为只读访问或单向绑定）是它不允许您更新/写入父范围。

更新FIDDLE

Answer 1

AngularJS文档处于不断变化的状态，我无法找到与不同类型的隔离范围绑定相关的页面，因此我对任何不准确之处表示道歉。

How to make it work

scope: {
    name: '=' //formerly @
},

IIRC @绑定将传入的值作为字符串文字。我不是肯定为什么这意味着链接函数赋值不会覆盖它，如果我能找到文档中的部分然后我会链接到它。

=绑定绑定到scope属性的值，并在更新时更新隔离范围和指定范围。

<my-friends name="name"> //formerly name="{{name}}"

使用=绑定意味着需要传递范围属性而不是字符串值。

再次，抱歉任何不正确或模糊的信息。如果我能找到dang文档，我会更新答案。

Answer 2

1）使用@绑定，在摘要阶段，angular将重新评估表达式并将值设置回控制器的当前值，这将覆盖您在链接功能。

2）你在小提琴中加载了2个角度版本。第二次加载角度再次遍历DOM并尝试再次编译已编译的DOM 。有关详情，请查看我对其他问题Illegal use of ngTransclude directive in the template

的回答

DEMO

AngularJs指令转换错误和@绑定

2 个答案: