component - angularjs transclude



Share Variable zwischen Komponenten angular 1.5 (1)

Ich vermute, dass Sie die Tatsache bekämpfen, dass Komponentenbereiche immer isoliert sind (der Zugriff auf den übergeordneten Bereich ist also nur möglich, wenn Sie die Bindung deklarieren).

Ich vermute, dass Ihr Code in etwa so aussehen müsste:

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

Direktiven gewähren standardmäßig Zugriff auf den übergeordneten Bereich, was erklären könnte, warum sie als Direktive für Sie in der inneren Komponente (wahrscheinlich bar) Zugriff auf die übergeordnete $ ctrl erhält (da Anweisungen auch controllerAs nicht standardmäßig setzen).

EDIT: Ich denke immer noch, dass meine ursprüngliche Antwort wahr ist und mit Direktiven, die mit dem Bereich arbeiten, durchfallen. Es gibt ein paar andere Fixes (2 und 3 unten) in der PLNKR, von denen ich vermute, dass sie nichts mit dem ursprünglichen Problem zu tun haben, denn wenn sie wären, könnte ich mir nicht vorstellen, dass es auch als Richtlinie funktioniert hätte.

Wenn Sie die folgenden Änderungen vornehmen, sollte Ihr Plunk funktionieren:

  1. Wenn Sie auf eine Bereichsvariable in einer Komponente verweisen, setzen Sie ihr $ ctrl voran (oder was auch immer Ihr controllerAs Wert für diese Komponente ist. $ Ctrl ist der Standard in einer Komponente, in der controllerAs Syntax nicht der Standard für Anweisungen ist).
  2. Machen Sie das foo-Modul abhängig von bar (es verbraucht es, so dass es davon abhängen muss)
  3. Beim Verweisen auf camelBack-Bereich (für Direktiven) oder Bindung (für Komponenten) ändern Werte in der Vorlage Großbuchstaben in Kleinbuchstaben und fügen einen Bindestrich hinzu (z. B. camelBack -> camel-back)

https://plnr.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);

Für weitere Klarheit (weil $ ctrl zweimal oben verwendet wird und im Plunk die Verwendung als ambivalent erscheint), können Sie hier separate controllerAs-Werte haben und foo's sollten nicht in bar zugänglich sein. foo.js und bar.js könnten genauso vernünftig wie folgt sein und das würde immer noch funktionieren:

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

Ich habe eine eckige Komponente wie folgt:

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

und ein anderes Setup wie folgt

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

Mein Index.html

<foo>Hello Plunker!</foo>

Aber ich kann die Vorlage in der Leiste nicht zum arbeiten bringen. Was vermisse ich?

Ich habe einen Plunkr hier: https://plnr.co/edit/Qj9ZL9NFtdXWHBY0yzJf?p=preview





angularjs-scope