加载javascript后AngularJS函数不应用？_Javascript_Angularjs

加载javascript后AngularJS函数不应用？

javascript angularjs

加载javascript后AngularJS函数不应用？,javascript,angularjs,Javascript,Angularjs,我有一个页面，使用javascript load（）从另一个页面注入特定的div元素： setTimeout(function(){ function showPattern(patternId, page_url) { var patternstuff = $(patternId).load(page_url + " .pattern-markup"); return patternstuff; } showPattern("#tabsOpen .pattern",

我有一个页面，使用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>

有角度的标签在我从中拉出的单个页面上工作正常。该页面和我正在加载它们的页面在周围元素上都具有相同的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>


标签

选项卡1
选项卡2
选项卡3

表1内容
表2内容
表3内容

在javascript加载HTML后，我是否需要重新初始化AngularJS，以便AngularJS识别选项卡并使其工作？

我想知道

selectTab

和

isSelected

中对

this

值的引用是否产生了问题。在控制器中尝试以下代码

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

或者，有没有更好的方法用Angular加载这些HTML块，这样我就不依赖javascript load（）？这是我发现的唯一能够从页面中提取特定内容的方法。（我想在其他地方为该HTML保留一个单独的页面。）加载的代码-是否在指令中？不是，它只是存在于不同目录中的单个HTML文件中。这就是您的问题所在。将代码封装在指令中，并将其附加到最顶层的DOM元素（可能是主体）。然后再检查一遍。不幸的是，这并没有改变任何事情。不过我会把零钱留着。谢谢

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