作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的代码有一些问题。我在我的网站上制作了一些组件,当我放置脚本时,它只出现在最后一个。我已经尝试将文件放在不同的文件夹中,但问题仍然存在。所有组件和主要模块都在 app 文件夹中。感谢您的帮助!
<!DOCTYPE HTML>
<html ng-app="app">
<head>
<title>TEMPLATED</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="public/css/main.css" />
</head>
<body>
<!-- Header -->
<header-component></header-component>
<!-- Banner -->
<banner-component></banner-component>
<!-- One -->
<one-component></one-component>
<!-- Scripts -->
<script src="public/js/jquery.min.js"></script>
<script src="public/js/skel.min.js"></script>
<script src="public/js/util.js"></script>
<script src="public/js/main.js"></script>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/angular/angular.min.js"></script>
<script src="app/app.module.js"></script>
<script src="app/banner/banner.component.js"></script>
<script src="app/header/header.component.js"></script>
<script src="app/one/one.component.js"></script>
</body>
</html>
应用程序模块.js
(function(){
'use strict';
angular
.module('app', []);
}());
header.component.js
(function(){
'use strict';
angular
.module('app', [])
.component('headerComponent', {
bindings: {},
templateUrl : 'app/header/header.html',
controller : headerCtrl
})
function headerCtrl($scope){
console.log('header')
$scope.logo = "theory";
$scope.home = "Home";
$scope.generic = 'Generic'
$scope.elements = "Elements";
}
}());
banner.component.js
(function(){
'use strict';
angular
.module('app', [])
.component('bannerComponent', {
bindings: {},
templateUrl : 'app/banner/banner.html',
controller : bannerCtrl
})
function bannerCtrl($scope){
console.log('banner');
$scope.welcome = "Welcooome to Theory";
}
}());
一个.component.js
(function(){
'use strict';
angular
.module('app', [])
.component('oneComponent', {
bindings: {},
templateUrl : 'app/one/one.html',
controller : oneCtrl
})
function oneCtrl($scope){
$scope.articulos = [
{
titulos : "Magna tempus sed amet 1",
textos : "Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu.",
btn : "More"
},
{
titulos : "Magna tempus sed amet 2",
textos : "Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu.",
btn : "More"
},
{
titulos : "Magna tempus sed amet 3",
textos : "Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu.",
btn : "More"
},
]
}
}());
最佳答案
您在此处的每个文件中引导一个单独的应用程序。
相反,只引导一个,然后将所有组件和 Controller 注册到一个。
// bootstrap just one app
var app = angular.module('app',[]);
// then register all your controllers to the same app
app.controller('oneCtrl', ['$scope', function($scope) {
// your controller code
}]);
// and register all your components to the same app
app.component('oneComponent', {
bindings: {},
templateUrl : 'app/one/one.html',
controller : 'oneCtrl'
});
您只会看到 <one-component></one-component>
组件,因为它是您加载的最后一个组件,有效地覆盖了之前的应用程序声明。
关于javascript - 我无法在 angularjs 中加载脚本组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46019803/
我正在开发一个需要能够平均三个数字的 Facebook 应用程序。但是,它总是返回 0 作为答案。这是我的代码: $y = 100; $n = 250; $m = 300; $number = ($y
我只是无法弄清楚这一点,也找不到任何对我来说有意义的类似问题。我的问题:我从数据库中提取记录,并在我的网页上以每个面板 12 条的倍数显示它们。因此,我需要知道有多少个面板可以使用 JavaScrip
我是一名优秀的程序员,十分优秀!