AngularJs 指令嵌入錯誤和@綁定

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

我有兩個問題：

1. 為什么指令模板中的 {{name}} 說的是“John Doe”而不是“Anderson”？ 我希望它是 Anderson，因為 name 屬性是原型繼承的，一旦在鏈接函數中寫入它，它就會失去這種祖先的聯系。

2. 它似乎正確轉置，但為什么它會在開發工具控制台中拋出錯誤 Error: [ngTransclude:orphan] ？ 可能是我使用的角度版本嗎？

任何幫助是極大的贊賞。

這是小提琴： JsFiddle

更新：

嵌入錯誤是由於錯誤地加載了 angular 兩次。

使用@綁定時，您可以在初始摘要循環完成后覆蓋指令內的name ，例如在單擊處理程序或其他內容中。 但是，一旦您更改父作用域的 name 屬性，它就會被覆蓋。

關於@的問題是我對隔離作用域的誤解。 它按照示例中的預期方式工作。 隔離作用域通常不會從父級繼承。 而@綁定也稱為只讀訪問或單向綁定的含義是它不會讓您更新/寫入父作用域。

更新的小提琴

Answer 1

AngularJS 文檔處於不斷變化的狀態，我找不到與不同類型的隔離范圍綁定相關的頁面，因此對於任何不准確之處，我深表歉意。

如何讓它發揮作用

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

IIRC @綁定將傳入的值作為字符串文字。 我不確定為什么這意味着鏈接函數分配不會覆蓋它，如果我能在文檔中找到該部分，那么我會鏈接到它。

=綁定綁定到范圍屬性的值，並在更新時更新隔離范圍和分配范圍。

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

使用=綁定意味着需要傳遞范圍屬性而不是字符串值。

再次，對於任何不正確或模糊的信息，我們深表歉意。 如果我能找到 dang 文檔，我會更新答案。

Answer 2

1) 使用@綁定，在摘要階段，angular 將重新計算表達式並將值設置回控制器的當前值，這將覆蓋您在鏈接函數中設置的值。

2）您在小提琴中加載了 2 個版本的 angular。 第二次加載的 angular 再次遍歷 DOM 並嘗試再次編譯已經編譯的 DOM 。 有關更多信息，請查看我對模板中非法使用 ngTransclude 指令的另一個問題的回答

演示