我正在使用 Angular 1.6.7。我在我的应用程序中创建了多个模块。如何将父模块 (myApp) 中定义的常量（例如“rootURL”）传递给子模块 (childApp)？更具体地说，我需要将“rootURL”的值分配给 childApp 组件的 templateUrl，这样我们就不必对每个模块的根目录进行硬编码。我想我知道如何在控制器内共享变量，但不知道如何在组件的定义内执行此操作。
这是一个Plunker https://plnkr.co/edit/hhojtzaTJvrReEBfvhfc?p=preview演示。在 app.module.js 中我定义了一个常量“config”。我可以做什么，以便当我为“child”（components/child.component.js）定义组件时，而不是 templateUrl:“components/child.html”，我可以说类似“config.rootURL + child.html”的内容“？我们不必使用常量。
先感谢您。
// app.module.js
(function(){
"use strict";
var myApp = angular
.module("myApp", ["child"]);
myApp.constant("config", {
rootURL: "components/"
, version: "myApp1.0.0"
})
})();
// app.component.js
(function(){
"use strict";
// Define controller
function mainController(){
this.$onInit = function() {
var mainVM = this;
mainVM.parent = {
"lastName": "Smith"
, "firstName": "Jordan"
};
};
}
// Define component
var mainComponent = {
controller: mainController
, controllerAs: "mainVM"
};
// Register controller and component
angular.module("myApp")
.controller("mainController", mainController)
.component("mainComponent", mainComponent);
})();
// components/child.module.js
(function(){
"use strict";
var child = angular.module("child", []);
})();
// components/child.component.js
(function(){
"use strict";
// Define controller
function childController() {
this.$onInit = function() {
var vm = this;
vm.child = {
"firstName": "Jack"
}
};
// end of $onInit()
}
// Define component
var child = {
templateUrl: "components/child.html"
, controller: childController
, controllerAs: "vm"
, bindings: {
parent: "<"
}
};
// Register controller and component
angular.module("child")
.controller("childController", childController)
.component("child", child);
})();
<!DOCTYPE html>
<html>
<head>
<script src="//code.angularjs.org/snapshot/angular.js"></script>
<link rel="stylesheet" href="style.css">
<script src="app.module.js"></script>
<script src="app.component.js"></script>
<script src="components/child.module.js"></script>
<script src="components/child.component.js"></script>
</head>
<body ng-app="myApp" ng-controller="mainController as mainVM">
Parent: {{mainVM.parent.firstName}} {{mainVM.parent.lastName}}<br>
<child parent="mainVM.parent"></child>
</body>
</html>
<!-- components/child.html -->
Child: {{vm.child.firstName}} {{vm.parent.lastName}}
我可以说“config.rootURL + child.html”之类的内容，而不是 templateUrl:“components/child.html”？
Instead templateUrl你可以写template with ng-include:
template: '<ng-include src="getTemplateUrl()"/>',
and:
scope.getTemplateUrl = function () {
return config.rootURL + 'child.html';
};
Demo Plunker https://plnkr.co/edit/DwY9b0XAHf3HgssHPjbX?p=preview
代码示例：
function childController(config) {
this.getTemplateUrl = function(){
return config.rootURL + 'child.html';
};
this.$onInit = function() {
var vm = this;
vm.child = {
"firstName": "Jack"
}
};
// end of $onInit()
}
// Define component
var child = {
//templateUrl: "components/child.html"
template: '<ng-include src="vm.getTemplateUrl()"/>'
, controller: childController
, controllerAs: "vm"
, bindings: {
parent: "<"
}
};
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
