Question

我对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下面的代码（下面是）是解雇的代码。

在同一个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中？我一直试图在我的网站上运行模态窗口大约一周。非常感谢任何帮助。

Answer 1

首先创建一个标识为Home.IndexController的控制器。根据路由配置，当您导航到“/ screenings”时，这将实例化。通过指令us popup()调用附加到$ Home.IndexController范围的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'
     });

     ...
});

<强> 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>

角度模态窗口不适用于我的生活

1 个答案: