为什么我的 angular 指令没有在隔离范围内获取父控制器范围？

Question

我已经严格按照 Angular 文档来获得一个指令，该指令可以处理一个独立的范围，其中包含来自父控制器范围对象的几个变量。

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=preview

谁能告诉我我的代码有什么问题？为什么指令的隔离范围 return 未定义 'myPokie' 和 'name' 的值？

我看到其他人说你必须为此使用 $scope.watch.. 但 angular 的指令文档对此没有任何说明.. 我真的不知道不想将 $scope.watch 用于一些应该开箱即用的微不足道的东西。

Answer 1

当您在指令中声明独立作用域时，这意味着您将使用属性向指令提供这些值。

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

这意味着您的指令作用域不会从父作用域原型继承。 pokie 属性为 myPokie 提供值 & name 属性将为您的指令提供 name 的值，= 表示双向绑定，如果您的 myPokie指令中的值改变，相同的引用值将在父控制器中改变。 name属性也是如此。

您的指令元素标记应为：

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

Working Plunkr

Answer 2

您使用的是独立作用域，但没有传递变量。问题出在你的 HTML:

将您的 HTML 更改为：

<parse-object></parse-object>

收件人：

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

独立范围从 DOM 元素获取参数。因此，如果您在范围内声明：

myPokie: '=pokie',

这意味着 myPokie 变量应该取自范围内的 pokie 属性。您的 name: "=name" 可以更改为 name: "="，因为它是完全相同的名称。

Plunker

为什么我的 angular 指令没有在隔离范围内获取父控制器范围？

Why is my angular directive not getting Parent controller scope inside isolated scope?

javascript

angularjs

angularjs-directive

angularjs-scope

isolate-scope