在tab html中使用angular js控制器_Html_Angularjs

在tab html中使用angular js控制器

html angularjs

在tab html中使用angular js控制器,html,angularjs,Html,Angularjs,我是新手。我正在使用ng include在div中加载html页面现在我的问题是，我已经使用angular js加载html页面，我想在加载的页面中也使用angular js 我尝试将子模块中的控制器添加到加载页面中的模块中，但该模块也不起作用。（）我该怎么做父页面：脚本： var mainApp=angular.module（“mainApp”，[]）；控制器（“mainCtrl”[“$scope”，“$http”，函数（$s，$h）{ $s.title=“Tab1”； $s.ur

我是新手。我正在使用

ng include在div
中加载html页面

现在我的问题是，我已经使用angular js加载html页面，我想在加载的页面中也使用angular js
我尝试将子模块中的控制器添加到加载页面中的模块中，但该模块也不起作用。（）
我该怎么做
父页面：

脚本：

var mainApp=angular.module（“mainApp”，[]）；
控制器（“mainCtrl”[“$scope”，“$http”，函数（$s，$h）{
$s.title=“Tab1”；
$s.urls={Tab1:“Tab1.html”，Tab2:“Tab2.html”，Tab3:“Tab3.html”}；
$s.currentTab=$s.url.Tab1；
$s.load=函数（第页，活动选项卡）{
$s.currentTab=第页；
$s.title=activeTab；
}
}]);

html:

表1
表2
表3

子页面

剧本

控制器（“codeCtrl”[“$scope”、“$http”、“$window”、函数（$s、$h、$w）{
$s.new=函数（）{
警惕（“成功”）；
}
}]);

html:

新的
如果我理解正确，您正在将组件脚本加载到模板文件中
无法在角度模板中加载脚本，它们将被删除
此外，angular core没有内置组件的惰性负载。
有使用第三方模块或加载管理器的方法，但现在我建议您将它们全部包含在主页中
要获得更详细的错误输出和堆栈跟踪，请首先使用angular.js的开发版本，而不是angular.min.js
您的ng app属性引用mainCtrl，而不是mainApp.means？有什么不对劲吗？你能进一步解释一下吗？当然。应具有ng app=“mainApp”
。它是指主角度应用模块。您已正确设置了ng controller
属性。明白了，这是打字错误，ng app
位于html
标记上。我已让您的用例工作。plunker中的任何内容是否有助于阐明问题？我的猜测是，脚本标记中声明codeCtrl
控制器的mainApp
引用与mainCtrl
控制器中的mainApp引用不同，但很难从您提供的代码中了解。因此，我不能包含包含脚本的html。还有其他方法吗？是的……第三方惰性加载程序。没有内置的，因为我已经声明了DHMM，最好我只改变我的方法。需要一个有很多路线和组件的相当大的网站，然后才成为一个问题。如果只是学习，我就不会担心懒惰加载雪人，我现在没有时间进行实验。有一天我会试试的。
<script>
        var mainApp = angular.module("mainApp", []);
        mainApp.controller("mainCtrl", ['$scope', '$http', function ($s, $h) {
            $s.title = "Tab1";
            $s.urls = { Tab1: "Tab1.html", Tab2: "Tab2.html", Tab3: "Tab3.html" };
            $s.currentTab = $s.urls.Tab1;
            $s.load = function (page, activeTab) {
                $s.currentTab = page;
                $s.title = activeTab;
            }
        }]);
</script>

<body ng-controller="mainCtrl">
    <div class="header">
        <button ng-class="{'active':title === 'Tab1'}" ng-click="load(urls.Tab1,'Tab1');">Tab1</button>
        <button ng-class="{'active':title === 'Tab2'}" ng-click="load(urls.Tab2,'Tab2');">Tab2</button>
        <button ng-class="{'active':title === 'Tab3'}" ng-click="load(urls.Tab3,'Tab3');">Tab3</button>
    </div>
    <div class="content" ng-include="currentTab">
    </div>
</body>

<script>
        mainApp.controller("codeCtrl", ['$scope', '$http', '$window', function ($s, $h, $w) {
            $s.new = function () {
                alert('success');
            }
        }]);
</script>

<div ng-controller="codeCtrl">
        <div class="subHeader">
            <button class="btn1" ng-click="new();">New</button>
        </div>
</div>