Angular 模态 Window 对我的生活不起作用

Question

我对 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 在我的网站上工作大约一个星期。非常感谢任何帮助。

Answer 1

首先创建一个标识符为 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 模态 Window 对我的生活不起作用

Angular Modal Window not working for the life of me

angularjs

angular-directive

angular-services

angular-controller

modal-window