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

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

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

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

（函数（角度）{
"严格使用",；
角度模块（'bar'，[]））
角度。模块（'bar'）。组件（'bar'）{
模板：“成功了”，
绑定：{
showMe:“=”
}
});
})（窗口角度）；

还有另一个这样的设置

(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);

（函数（角度）{
"严格使用",；
角度。模块（'foo'，[]）
角度。模块（'foo'）。组件（'foo'{
模板：“单击我”+
''
});
})（窗口角度）；

my index.html

<foo>Hello Plunker!</foo>

你好，普朗克！

但我无法让酒吧里的模板工作。我错过了什么

---

我这里有一个问题：

我怀疑您是在反对组件作用域总是隔离的事实（因此只有在声明绑定时才存在对父作用域的访问）

我怀疑您的代码需要如下所示：

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

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

默认情况下，指令提供对父作用域的访问，这可能解释了为什么它在内部组件（可能是bar）中作为一个指令为您提供对父$ctrl的访问权限（因为指令在默认情况下也不设置controllerAs）

编辑：我仍然认为我最初的答案是正确的，对于指令来说，这是一个范围失效的工作。plnkr中还有几个其他的修复（下面的2个和3个），我猜它们与最初的问题无关，因为如果它们是，我无法想象它也会起到指令的作用

进行以下更改将使plunk正常工作：

每当在组件中引用范围变量时，请在其前面加上$ctrl（或该组件的CONTROLERAS值是什么？$ctrl是组件中的默认值，其中没有CONTROLERAS语法是指令的默认值）

使foo模块依赖于bar（它正在使用它，因此它必须依赖于bar）

在模板中引用camelBack作用域（用于指令）或绑定（用于组件）值时，将大写字母更改为小写并添加破折号（例如camelBack->camelBack）

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);

(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);

（函数（角度）{
"严格使用",；
角度模块（'foo'，['bar']））
角度。模块（'foo'）。组件（'foo'{
模板：“单击我”+
''
});
})（窗口角度）；

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);

(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);

（函数（角度）{
"严格使用",；
角度模块（'bar'，[]））
角度。模块（'bar'）。组件（'bar'）{
模板：“成功了”，
绑定：{
showMe:“=”
}
});
})（窗口角度）；

为进一步明确起见（因为$ctrl在上面和plunk中使用了两次，使其用法显得模棱两可），您可以在此处使用单独的controllerAs值，而foo的值不应在bar中访问。foo.js和bar.js可以合理地如下所示，这仍然有效：

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);

(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);

（函数（角度）{
"严格使用",；
角度模块（'foo'，['bar']））
角度。模块（'foo'）。组件（'foo'{
controllerAs:'fooCtrl'，
模板：“单击我”+
''
});
})（窗口角度）；

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);

(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);

（函数（角度）{
"严格使用",；
角度模块（'bar'，[]））
角度。模块（'bar'）。组件（'bar'）{
controllerAs:'barCtrl'，
模板：“成功了”，
绑定：{
showMe:“=”
}
});
})（窗口角度）；

我觉得在某个地方应该有一个属性来设置newPopup的值。组件作用域总是隔离的，而指令作用域默认为接受父作用域。如果希望组件能够访问父作用域中的某些内容，则必须显式绑定该组件，请参见并查看比较图表。如果您谈论的是javascript变量而不是范围变量，请澄清问题。如果我离这一点很近，请告诉我，我会回答。@stygma在这种情况下，变量是newPopup，我想在两者之间共享。我以为上面的绑定会显式地绑定它，但我似乎不知道something@AmyBlankenship像html属性吗？那看起来怎么样？我尝试在控制器中将其显式设置为false，这给了我一个编译时间error@MaxPower如果您的问题没有得到回答，您是否可以发布更完整的代码，标记哪个模板指向什么，并展示两个指令协同工作的示例使用？我意识到，在试图回答时，我对如何使用这些组件做出了许多假设。