Question

我有一个页面，我正在使用javascript load（）从另一个页面注入特定的div元素：

setTimeout(function(){
  function showPattern(patternId, page_url) {
    var patternstuff = $(patternId).load(page_url + " .pattern-markup");
    return patternstuff;
  }
  showPattern("#tabsOpen .pattern", "individuals/tabs-open/index.html");
}, 200);

超时，否则html将无法加载和渲染。

我在我带来的标签上使用AngularJS：

<div class="tab-container container" ng-controller="PanelController as panel">
    <ul class="tabs">
        <li class="active" ng-class="{ active: panel.isSelected(1) }"><a ng-click="panel.selectTab(1)">Tab 1</a></li>
        <li ng-class="{ active: panel.isSelected(2) }"><a ng-click="panel.selectTab(2)">Tab 2</a></li>
        <li ng-class="{ active: panel.isSelected(3) }"><a ng-click="panel.selectTab(3)">Tab 3</a></li>
    </ul>
    <div class="tab-contents">
        <div class="tab-content" ng-show="panel.isSelected(1)">
            Tab 1 content
        </div>
        <!-- Tab 1 Ends Here -->

        <div class="tab-content" ng-show="panel.isSelected(2)">
            Tab 2 content
        </div>
        <!-- Tab 2 Ends Here -->

        <div class="tab-content" ng-show="panel.isSelected(3)">
            Tab 3 content
        </div>
        <!-- Tab 3 Ends Here --> 
    </div>
</div>

但是，当页面呈现时，Angular不起作用，并且所有tab-content div都显示出来。 Angular选项卡控制器位于：

app.controller("PanelController", function() {
    this.tab = 1;

    this.selectTab = function(setTab) {
        this.tab = setTab;
    };
    this.isSelected = function(checkTab) {
        return this.tab === checkTab;
    };
});

Angular标签在我拉动它们的单个页面上正常工作。该页面和我加载它们的页面在周围元素上具有相同的ng-app =“manual”属性。以下是我从中绘制标签HTML的单个HTML页面：

<!doctype html>
<html lang="en" ng-app="manual">
<head>
<title>Tabs</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../assets/css/patterns.css">
<script src="../../assets/js/angular.min.js"></script>
<script src="../../assets/js/app.js"></script>
</head>
<body>
<!-- Tabs -->
<div class="pattern-markup">
    <div class="tab-container container" ng-controller="PanelController as panel">
        <ul class="tabs">
            <li ng-class="{ active: panel.isSelected(1) }"><a ng-click="panel.selectTab(1)">Tab 1</a></li>
            <li ng-class="{ active: panel.isSelected(2) }"><a ng-click="panel.selectTab(2)">Tab 2</a></li>
            <li ng-class="{ active: panel.isSelected(3) }"><a ng-click="panel.selectTab(3)">Tab 3</a></li>
        </ul>
        <div class="tab-contents">
            <div class="tab-content" ng-show="panel.isSelected(1)">
                Tab 1 content
            </div>
            <!-- Tab 1 Ends Here -->

            <div class="tab-content" ng-show="panel.isSelected(2)">
                Tab 2 content
            </div>
            <!-- Tab 2 Ends Here -->

            <div class="tab-content" ng-show="panel.isSelected(3)">
                Tab 3 content
            </div>
            <!-- Tab 3 Ends Here --> 
        </div>
    </div>
</div>
<!-- End Tabs -->
</body>
</html>

在通过javascript加载HTML之后，我是否需要以某种方式重新初始化AngularJS，以便Angular识别选项卡并使它们正常工作？

Answer 1

我想知道this和selectTab中isSelected的价值是否会产生问题。在控制器中尝试以下代码，

app.controller("PanelController", function() {
    var panel = this;
    panel.tab = 1;

    panel.selectTab = function(setTab) {
        panel.tab = setTab;
    };
    panel.isSelected = function(checkTab) {
        return panel.tab === checkTab;
    };
});

在javascript加载后，AngularJS函数不适用？

1 个答案: