gpt4 book ai didi

javascript - 从嵌入的 HTML 访问组件 Controller

转载 作者:行者123 更新时间:2023-12-03 05:11:43 25 4
gpt4 key购买 nike

<强> Plunker ,因为代码片段编辑器今天不喜欢我。

快速信息

在使用 Angular 1.6 时,我正在努力使用 .component() 代替 .directive(),以便让自己更多地了解 Angular 所使用的设计模式类型。 Angular 2。问题是我无法使用对 $tabs$tab (这些组件的 Controller )的任何引用。使用 {{$tab.tabsCtrl.nothing}}{{$tabs.nothing}} 不会输出任何内容。

请注意:这不是我的实际场景,但它确实与我实际正在做的事情有一个共同的问题。

我进行了搜索,得到了很多有关 Angular 2 组件的结果,但如果我诚实地读完,它基本上是希腊语。

代码引用(不适用于代码片段编辑器,仅供引用)

// Code goes here
angular.module('main.app', [])
.component('tabs', {
controller: function($http) {
this.tabs = [];
this.nothing = 'nada';
this.addTab = function(tab) {
this.tabs.push(tab);
}; //end addTab
this.selectTab = function(tab) {
this.tabs.map(function(item) {
item.selected = false;
});
var selected = this.tabs.filter(function(item) {

return item === tab;
});
if (selected.length) selected[0].selected = true;
}; //End selectTab
},
template: '<ul class="nav nav-tabs nav-justify justify-content-center"><li class="nav-item" ng-repeat="tab in $tabs.tabs" ><a href="#" ng-click="$tabs.selectTab(tab)" class="nav-link" ng-class="{\'active\':tab.selected}">{{tab.tabTitle}}</a></li></ul><div class="tabs-content" ng-transclude></div>',
transclude: true,
controllerAs: '$tabs'
})
.component('tab', {
require: {
'tabsCtrl': '^tabs'
},
bindings: {
'tabTitle': '@',
'selected': '<'
},
controller: function() {
this.$onInit = function() {
this.selected = this.selected || false;
this.tabsCtrl.addTab(this);
}; //end $onInit
},
transclude: true,
controllerAs: '$tab',
template: '<div class="tab" ng-show="$tab.selected"><div ng-transclude></div></div>'
})
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
<tabs>
<tab tab-title="First Tab" selected="true">
<div class="jumbotron">
<h3>Lorem ipsum.</h3>
<p class="lead">Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, in!</p>
</div>
some other text
</tab>
<tab tab-title="Second Tab">
<strong>With a header!</strong>
<div class="row">
<div class="col-6 bg-primary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, quam, quod, optio qui cum rerum vel eos rem aspernatur quia maxime incidunt numquam ipsum eum neque dicta distinctio. Minus, itaque.</div>
<div class="col-6 bg-danger">Reprehenderit, numquam, rerum, reiciendis neque adipisci provident ea quo illo praesentium inventore fuga quisquam ducimus? Ipsum, autem, illo ullam corporis incidunt ad labore accusantium tempora officia quas quia eaque facere.</div>
</div>
</tab>
<tab tab-title="Potato Tab">
<h3>Big books {{$tabs.nothing||'nah'}}</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste quos assumenda vero fugiat officia pariatur consequatur deserunt quisquam veniam nemo?</p>
<p>Fugiat, error, impedit, accusantium consequuntur beatae facere esse voluptatum enim animi porro commodi modi cupiditate aliquam iure ipsa. A, officiis!</p>
<p>Architecto velit quod explicabo laborum reprehenderit culpa tempora facilis minima eum. Natus aliquid eaque laboriosam accusamus dolor hic similique ad.</p>
</tab>
</tabs>

谢谢,以防万一我以后忘记说!

最佳答案

嵌入的作用域将是指令隔离作用域的子作用域。

由于组件使用隔离作用域,因此您不能仅通过执行 {{$tabs.nothing}} 来使用原型(prototype)继承。但是,如果 $tabs 通过 $rootScope 公开,或者层次结构中选项卡上方的任何其他非隔离范围(仅 ng-app) > 在您的示例中,因此只有 $rootScope)。

您可以手动遍历作用域链。

根据您的示例:

  1. 当前作用域将是 tab 指令的嵌入子作用域
  2. 第一个 $parent 将是隔离 tab 范围
  3. 第二个 $parent 将是 tabs 指令的嵌入子范围
  4. 第三个 $parent 将是隔离 tab 范围

这给出:

{{$parent.$parent.$parent.$tabs.nothing}}

演示: http://plnkr.co/edit/jpTGVKWKEQlmGYpaeqtZ?p=preview

在大多数情况下,这并不是一个真正可行的解决方案。通过服务公开嵌入内容所需的功能可能会更好。

在不了解真实用例的情况下很难给出更好的解决方案。

关于javascript - 从嵌入的 HTML 访问组件 Controller ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41787179/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com