Question

我有一个像这样的角度组件设置：

(function(angular) {
'use strict';
angular.module('bar', [])
angular.module('bar').component('bar', {
template: '<h1 ng-show="showMe">It worked</h1>',
bindings: {
  showMe: '='
   }
 });
})(window.angular);

和另一个这样的设置

(function(angular) {
'use strict';
angular.module('foo', [])
angular.module('foo').component('foo', {
template: '<button ng-click="showMe = true">Click Me</button>' +
        '<bar showMe = "showMe"></bar>'
});
})(window.angular);

我的index.html

<foo>Hello Plunker!</foo>

但我无法让条形图模板工作。我错过了什么？

我在这里有一个新手：https://plnkr.co/edit/Qj9ZL9NFtdXWHBY0yzJf?p=preview

Answer 1

我怀疑您正在与组件范围始终是隔离的事实作斗争（因此，只有在声明绑定时才存在对父范围的访问）

我怀疑你的代码需要看起来像这样：

<foo newPopup="'something'">
  <!-- bar inside foo's template -->
  <bar newPopup="$ctrl.newPopup"></bar>
  <!-- end foo's template -->
</foo>

默认情况下，指令允许访问父作用域，这可以解释为什么它作为内部组件（可能是bar）的指令可以访问父$ ctrl（因为指令默认情况下不设置controllerAs））。

编辑：我仍然认为我的原始答案是正确的，并且指令正在使用范围。 plnkr还有其他一些修正（下面两个和三个），我猜这些修正与原始问题无关，因为如果它们是我无法想象它也可以用作指令。

进行以下更改应使您的插件正常工作：

每当你在组件中引用一个范围变量时，用$ ctrl作为前缀（或者你的controllerAs值是该组件的任何值）$ ctrl是组件中的默认值，其中没有controllerAs语法是指令的默认值。 / LI>
使foo模块依赖于bar（它正在消耗它，因此它必须依赖它）
当引用camelBack范围（用于指令）或绑定（用于组件）时，模板中的值会将大写更改为小写并添加破折号（例如camelBack - ＆gt;驼背）

https://plnkr.co/edit/ka2owI?p=preview

foo.js

(function(angular) {
  'use strict';
  angular.module('foo', ['bar'])
  angular.module('foo').component('foo', {
  template: '<button ng-click="$ctrl.showMe = true">Click Me</button>' +
            '<bar show-me = "$ctrl.showMe"></bar>'
});
})(window.angular);

bar.js

(function(angular) {
  'use strict';
  angular.module('bar', [])
  angular.module('bar').component('bar', {
    template: '<h1 ng-show="$ctrl.showMe">It worked</h1>',
    bindings: {
      showMe: '='
    }
  });
})(window.angular);

为了进一步说明（因为$ ctrl在上面和插件中使用了两次，使得它的使用看起来很暧昧），你可以在这里使用单独的controllerAs值，并且不应该在条形码中访问foo。 foo.js和bar.js可以合理地如下，这仍然可以工作：

foo.js

(function(angular) {
  'use strict';
  angular.module('foo', ['bar'])
  angular.module('foo').component('foo', {
  controllerAs: 'fooCtrl',
  template: '<button ng-click="fooCtrl.showMe = true">Click Me</button>' +
            '<bar show-me = "fooCtrl.showMe"></bar>'
});
})(window.angular);

bar.js

(function(angular) {
  'use strict';
  angular.module('bar', [])
  angular.module('bar').component('bar', {
    controllerAs: 'barCtrl',
    template: '<h1 ng-show="barCtrl.showMe">It worked</h1>',
    bindings: {
      showMe: '='
    }
  });
})(window.angular);

在组件角度1.5之间共享变量

1 个答案: