如何让 angular.js 将内容加载到模式中答案

【问题标题】：How to get angular.js to load content into a modal如何让 angular.js 将内容加载到模式中
【发布时间】：2013-10-25 23:05:02
【问题描述】：

我需要一些帮助，使我对这个问题的解决方案更加优雅。

应用摘要

该应用是使用 pushstate 的单页应用。登录页面（路径：/）包含文章链接（路径：/article/:articleId）。还有一个创建文章的链接（路径：/create）。单击任一链接时，URL 会发生变化，内容会加载到模式中（我使用的是 Bootstrap，但实现完全无关）。

解决方案

到目前为止，我已经完成了（请原谅我在盲目编码时出现的错误）：

index.htm

<!doctype html>
<html ng-app="App">
    <head>
        <title>{{page.title}}</title>
    </head>

    <body>
        <section id="articles" ng-controller="HomepageCtrl">
            <ul>
                <li ng-repeat="article in articles">
                    <a href="/article/{{article.id}}">{{article.name}}</a>
                </li>
            </ul>
        </section>

        <!-- markup simplified for example -->
        <modal id="modal">
            <div class="content ng-view></div>
        </modal>
    </body>
</html>

app.js

angular.module('Application', [], ['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider.when('/article/:articleId', {
        templateUrl : '/templates/article.htm',
        controller  : 'ArticleCtrl'
    }).when('/create', {
        templateUrl : '/templates/create.html',
        controller  : 'CreateCtrl'
    });

    $locationProvider.html5Mode(true);
}]).controller('HomepageCtrl', ['$scope', '$rootScope', function($scope, $rootScope) {
    $rootScope.page = {
        title : 'This is the homepage'
    };

    $scope.articles = [];
    $scope.articles.push({
        id   : 1,
        name : 'Interesting article'
    });
}]).controller('ArticleCtrl', ['$scope', '$rootScope', '$routeParams', function($scope, $rootScope, $routeParams) {
    $('#modal').modal();

    $rootScope.page = {
        title : 'This is article {{article.name}}' /* Not sure if this works! */
    };
}]).controller('CreateCtrl', ['$scope', '$rootScope', function($scope, $rootScope) {
    $('#modal').modal();

    $rootScope.page = {
        title : 'This is the article creation form'
    };
}]);

模板省略。

问题

虽然此解决方案有效，但效果不佳。主页内容保留在后台，与模态内容分离，这很好。当路由匹配时，检索模板内容并点击控制器，模式打开显示内容（ng-view）。这也很好。但是，我认为控制器不应该打开模式。

这样做最优雅的方式是什么？将内容路由到具有独特控制器的模式中的概念对应用程序很重要：将添加更多页面，这些页面都需要遵循此约定。还有其他警告，例如浏览器后退按钮和关闭模式应该让用户返回主页，但这些现在不太重要。一旦我了解了该逻辑的位置以及它如何与控制器交互，我就会很高兴。

【问题讨论】：

检查 angular-ui 模态组件。它创建了一个更好的抽象，并有一个$modal 服务，可以在控制器中用于打开和关闭模式。 angular-ui.github.io/bootstrap
您不应该使用 jQuery - $('#modal').modal() 在控制器内部进行 DOM 操作，尤其是因为模态标记超出了 ng-view 中的控制器范围

标签： javascript angularjs modal-dialog twitter-bootstrap-3

【解决方案1】：

我将试一试，希望答案是您想要的。

任何 DOM 操作（如 @m.e.conroy 上面所说）都不应该在控制器中完成，而应该在指令中完成。您可以通过执行任意数量的操作轻松地在控制器和指令之间进行通信。我不打算介绍一个整个的例子，但希望这能让你指出正确的方向。

要创建“模态”指令，您可以执行以下操作：

.directive('myModal', [ // declare any dependencies here
    function() {
        return {
            restrict: 'EA',
            templateUrl: 'path/to/the/modal/template.html',
            replace: true,
            scope: { currArticle: '='},  // create a two-way binding for "$scope.currArticle"
            link: function(scope, elem, attrs){
                elem.modal();  // initialize the modal using jQuery
                scope.$on('open-modal-' + attrs.name, function(e, article){
                    scope.currArticle = article;
                    elem.modal('open'); // or whatever call will open the modal
                });
            }
        };
    }
]);

然后是您的阅读文章模板（本示例位于 path/to/the/modal/template.html）：

<modal my-modal name="'read-article'">
    <!-- bind to modal content here -->
    {{currArticle.id}}: {{currArticle.name}}
</modal>

然后是你的控制器：

.controller('HomepageCtrl', ['$scope', '$rootScope', function($scope, $rootScope) {
    $rootScope.page = {
        title : 'This is the homepage'
    };
    $scope.articles = [];
    $scope.articles.push({
        id   : 1,
        name : 'Interesting article'
    });
    $scope.displayArticle = function(art){
        $scope.$emit('open-modal-read-article', art);
    };
}]);

最后，你的“家”视图：

...
<section id="articles" ng-controller="HomepageCtrl">
    <ul>
        <li ng-repeat="article in articles">
            <a href="" ng-click="displayArticle(article)">{{article.name}}</a>
        </li>
    </ul>
</section>
...

然后您将针对“创建”模式重复上述步骤。希望这为您提供了一个起点并根据需要进行修改。如果您需要更多说明，请告诉我。

【讨论】：

我是 AgnularJS 的新手，这个例子对我不起作用。我不知道如何使用它，因为在“主页”视图中它没有任何“”指令，只有在模板中？这不会加载“template.html”。