0

我对 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 中？大约一周以来，我一直试图让一个模态窗口在我的网站上工作。任何帮助深表感谢。

4

1 回答 1

1

首先创建一个带有标识符的控制器Home.IndexController。根据路由配置，这将在您导航到“/screenings”时实例化。通过指令我们调用popup()附加到 $scope 的函数进行测试。正如您所指定的，请确保引用以 . 为前缀的控制器属性和方法。Home.IndexControllerng-clickcontrollerAsvm.

您不需要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>
于 2017-05-12T20:35:48.453 回答