為什么我的Angular指令沒有將父控制器范圍帶入隔離范圍內？

Question

我一直在遵循Angular文檔，以獲取與隔離范圍一起使用的指令，該范圍包含來自父Controller范圍對象的幾個變量。

app.controller('MainCtrl', function($scope) {
    $scope.name = 'Parent Name';

    $scope.pokie = {
        whyIs: "thisUndefined?"
    };
});

app.directive('parseObject', function() {

    var preLink = function($scope, el, att, controller) {
        console.log('[link] :: ', $scope);
    };

    var postLink = function($scope, el, att, controller) {
        console.log('[PostLink] :: ', $scope);
        console.log('[$Parent] :: ', $scope.$parent.name);
    };

    return {

        restrict: 'E',
        scope: {
            myPokie: '=pokie',
            name: '=name'
        },
        template: [
          '<div>',
          '<h1>Directive does not get parent scope</h1>',
          '<h1>{{ myPokie }}</h1>',
          '<h2>{{ name }}</h2>',
          '</div>'
        ].join(''),

        compile: function() {
            return {
                pre: preLink,
                post: postLink
            }
        }
    }
});

http://plnkr.co/edit/FpQtt9?p=預覽

誰能告訴我我的代碼有什么問題嗎？ 為什么指令的隔離范圍為“ myPokie”和“ name”返回未定義的值？

我見過其他人說您必須為此使用$ scope.watch。.但是angular的指令文檔對此沒有任何說明。.我真的不想為某些瑣碎的事情使用$ scope.watch。應該開箱即用。

Answer 1

當您在指令中聲明隔離范圍時，這意味着您將使用屬性將這些值提供給指令。

 scope: {
     myPokie: '=pokie',
     name: '=name'
 }

這意味着您的指令范圍在原型上不會從父范圍繼承。 pokie屬性提供pokie的值， myPokie name屬性將提供您的指令的name值， =表示雙向綁定，如果myPokie值在指令中更改，則相同的引用值將在父控制器中更改。 name屬性也是如此。

您的指令元素標記應為：

<parse-object pokie="pokie" name="name"></parse-object>

工作朋克

Answer 2

您正在使用隔離范圍，但沒有傳遞變量。 問題出在您的HTML中：

從以下位置更改HTML：

<parse-object></parse-object>

至：

<parse-object pokie="pokie" name="name"></parse-object>

隔離范圍從DOM元素獲取其參數。 因此，如果您在范圍聲明內：

myPokie: '=pokie',

這意味着myPokie變量應從范圍內的pokie屬性中獲取。 您的name: "=name"可以更改為name: "="因為它是完全相同的名稱。

柱塞