Angular 模态 Window 对我的生活不起作用
Angular Modal Window not working for the life of me
我对 Angular.js 很陌生。
我在 Angular.js 中从模态 windows 教程中获取了必要的元素: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 下的代码(下方)是触发的代码。
在同一个 app.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 文件中的内容集成到 app.js 中的 screeningsController 中?我一直在尝试让模式 window 在我的网站上工作大约一个星期。非常感谢任何帮助。
首先创建一个标识符为 Home.IndexController
的控制器。基于路由配置,这将在您导航到“/screenings”时实例化。通过指令 us ng-click
调用附加到 Home.IndexController
的 $scope 的 popup()
函数进行测试。正如您指定的 controllerAs
确保引用以 vm.
.
为前缀的控制器属性和方法
您不需要同时加载 index.controller.js
和 app.js
。看起来您需要的所有内容都已在 app.js
中定义,所以只需确保将其加载到您的应用程序中即可。最终你会想要根据需要将它们分成不同的文件 and/or 模块。
尝试以下操作:
配置:
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'
});
...
});
Home.IndexController:
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>
我对 Angular.js 很陌生。
我在 Angular.js 中从模态 windows 教程中获取了必要的元素: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 下的代码(下方)是触发的代码。
在同一个 app.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 文件中的内容集成到 app.js 中的 screeningsController 中?我一直在尝试让模式 window 在我的网站上工作大约一个星期。非常感谢任何帮助。
首先创建一个标识符为 Home.IndexController
的控制器。基于路由配置,这将在您导航到“/screenings”时实例化。通过指令 us ng-click
调用附加到 Home.IndexController
的 $scope 的 popup()
函数进行测试。正如您指定的 controllerAs
确保引用以 vm.
.
您不需要同时加载 index.controller.js
和 app.js
。看起来您需要的所有内容都已在 app.js
中定义,所以只需确保将其加载到您的应用程序中即可。最终你会想要根据需要将它们分成不同的文件 and/or 模块。
尝试以下操作:
配置:
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'
});
...
});
Home.IndexController:
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>