我对Angular.js很陌生。
我从本教程中获取了有关 Angular 中模态窗口的必要元素.js：http://jasonwatmore.com/post/2016/07/13/angularjs-custom-modal-example-tutorial
孤立的，我可以让这段代码工作，但是在将其移植到我的网站后，我就是无法让它工作。
在 Jason 的代码中，他有一个名为 index.controller.js 的文件，虽然我已经将这个文件移植到我自己的页面，但我不相信它正在触发。这是index.controller.js：
(function () {
angular
.module('app')
.controller('Home.IndexController', Controller);
function Controller(ModalService) {
var vm = this;
vm.openModal = openModal;
vm.closeModal = closeModal;
function openModal(id){
ModalService.Open(id);
}
function closeModal(id){
ModalService.Close(id);
}
}
})();
在我自己的页面上，我拥有app.js中包含的所有控制器。这是它的布局：
var app = angular.module('app', ['ngRoute', 'ui.router']);
app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url: '/',
templateUrl: 'pages/main.html',
controller: 'mainController',
controllerAs: 'vm'
})
.state('screenings', {
url: '/screenings',
templateUrl: 'pages/screenings.php',
controller: 'Home.IndexController',
controllerAs: 'vm'
})
...
});
您可以看到，在第二个 .state 中，我正在尝试调用此特定部分的 index.controller.js 文件。但是，出于某种原因，screeningsController(下图)下的代码是正在触发的代码。
在同一个应用程序.js文件中，我有我的控制器：
...
app.controller('screeningsController', ['$scope', '$log', function($scope, $log){
$scope.popup = function() {
// assign a message to the $scope
$scope.message = 'Hello World!';
// use the $log service to output the message in a console
$log.log($scope.message);
};
}]);
...
有什么方法可以以某种方式将 index.controller.js 文件中的内容集成到应用程序中的筛选控制器.js中？我已经尝试在我的网站上运行一个模态窗口大约一周了。任何帮助都非常感谢。
首先创建一个标识符为Home.IndexController的控制器。根据路由配置，这将在您导航到"/screenings"时实例化。通过指令 us 调用附加到Home.IndexController$scope的popup()函数 我们ng-click进行测试。正如您指定的那样controllerAs请确保引用以vm.为前缀的控制器属性和方法。
您不需要同时加载index.controller.js和app.js。看起来您需要的所有内容都在app.js中定义，因此只需确保将其加载到您的应用程序中即可。最终，您需要根据需要将它们分成不同的文件和/或模块。
请尝试以下操作：
配置：
var app = angular.module('app', ['ngRoute', 'ui.router']);
app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url: '/',
templateUrl: 'pages/main.html',
controller: 'mainController',
controllerAs: 'vm'
})
.state('screenings', {
url: '/screenings',
templateUrl: 'pages/screenings.php',
controller: 'Home.IndexController',
controllerAs: 'vm'
});
...
});
首页.索引控制器：
app.controller('Home.IndexController', ['$log', function($log){
var vm = this;
vm.message = '';
vm.popup = function() {
vm.message = 'foobar';
$log.log(vm.message);
}
}]);
放映模板：
<!-- Home.IndexController /screenings template -->
<div>
<button type="button" ng-click="vm.popup()"></button>
</div>
这也假设您在主模板中的某处指定了ui-view，例如index.html或等效项：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body ng-app="app">
<div ui-view></div>
<!-- Vendor and Custom scripts added here -->
</body>
</html>