Javascript 如何让angular.js将内容加载到模式

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

应用程序摘要

该应用程序是使用pushstate的单页应用程序。登录页（路径：/）包含指向文章的链接（路径：/article/：articleId）。还有一个用于创建文章的链接（路径：/create）。单击任意一个链接时，URL都会更改，内容会加载到一个模式中（我使用的是Bootstrap，但实现与此无关）

解决方案

到目前为止，我已经（请原谅错误，因为我是盲编码）：

index.htm

模板省略

问题

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

---

最优雅的方式是什么？将内容路由到具有唯一控制器的模式中的概念对应用程序非常重要：将添加更多的页面，这些页面都需要遵循此约定。还有其他注意事项，例如浏览器后退按钮和关闭模式应该会让用户返回主页，但这些现在不太重要。一旦我明白了这个逻辑应该放在哪里，以及它如何与控制器接口，我会很高兴的。

我将尝试一下，希望答案就是你想要的

任何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

）：

最后，您的“主页”视图：

。。。




...

---

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

检查角度ui模态组件。它创建了一个更好的抽象，并且有一个

$modal

服务，可以在控制器中使用该服务来打开和关闭modal。您不应该使用jQuery-

$（'#modal'）.modal（）

在控制器内执行DOM操作，特别是因为模态标记超出了

ng视图中控制器的范围，我是AgnularJS的新手，这个示例对我不适用。我不知道如何使用它，因为在“主”视图中，它没有任何“”指令，只有在模板中？这不会加载“template.html”。
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'
    };
}]);

.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
                });
            }
        };
    }
]);

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