Question

我的目标是将模态移出源视图，并将其移动到自己的视图中，但出于某种原因，我的模态不会显示出来。我已经尝试将模态放入指令中，但它不起作用。我已将模态移动到索引页面，但是当模态打开时视图会更改。

Category.html

<section class="row">
    <h1>{{ selectedCategory | uppercase}}</h1>

    <div class="col-md-3 col-xs-12" ng-repeat="source in sources[selectedCategory]">
        <a ng-href="#/explore/{{selectedCategory}}/{{source.name}}">
            <section class="col-xs-2">
                <img ng-src="assets/img/{{source.imagename}}" height="30" width="30">
            </section>
            <p class="col-xs-8">{{ source.name }}</p>
        </a>

        <div ng-if="!objectContains(addedSources,source.name)"><!-- Show this, if addesSources does not contains source.name -->
            <section class="col-xs-2">
                <!-- This part, is where i want the modal to be called. -->
                <button class="tiny" data-toggle="modal" data-target="#myModal" ng-click="setUpModalData(source.name)">Add</button> 
            </section>
        </div>

        <div ng-if="objectContains(addedSources,source.name)"> <!-- Show this, if addesSources contains source.name -->
            <section class="col-xs-2">
                <button class="tiny secondary" ng-click="removeSource(source.name)">remove</button>
            </section> 
        </div>
    </div>
</section>

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal content -->
        </div><!-- modal-content -->
    </div><!-- modal-dialog -->
</div><!-- myModal -->

目前控制器没有打开或关闭模态，其唯一的工作是提供模态中显示的信息。如果单击“添加”以获取特定源，则模式将打开，并在顶部显示该源名称。

我尝试过做似乎适用于其他人的事情，但我不能让它为我工作。

我希望能够从不同的视图中调用此模态。您可以在源列表视图（所有源列表）和单个源视图（有关一个源的详细信息）上单击添加。两个视图上都会有一个添加按钮，它们都会调用此模态。

我正在使用twitter bootstrap for css。

这是我对此视图的控制器。

.controller('CategoryController', ['$scope', '$http', '$routeParams', function($scope, $http, $routeParams){
$http.get('assets/js/Category.json').success(function(data) {
    $scope.selectedCategory = $routeParams.simplename; //Get the the name of the url
    $scope.sources = data; //set sources list, for view to iterate.

    $scope.collectionList = {}; // List of all collections, and source under every collection
    $scope.addedSources = {}; // object of sources, and the collection they're in. etc ("The Verge" : tech)

    $scope.setUpModalData = function(simplename){
        $scope.selectedSourceName = $scope.selectedSourceNameTitle =simplename; 
        $scope.selectedCollection = $scope.selectedCategory;

        /* if the current category does not exist in the collection list,
        *  we will pre fill the form with the current category.
        *  Other wise we will set it, and it will not be pre pubulated.
        */
        if(!($scope.selectedCategory in $scope.collectionList)){
            $scope.collectionName = $scope.selectedCategory;
            $scope.selectedCollection = 'createNewCollection';
        }

    }

    $scope.removeSource = function(simplename){
        var collectionNameHolder = $scope.addedSources[simplename]; //The collection the source is in.

        delete $scope.collectionList[collectionNameHolder][simplename]; //delete the source from both lists.
        delete $scope.addedSources[simplename]
    }

    $scope.arrayContains = function(array, element){
        return (array.indexOf(element) > -1);
    }

    $scope.objectContains = function(object, element){
        return (element in object);
    }
});
}])

Answer 1

你能把它放在简化的jsfiddle中吗？我不确定你想要达到什么以及什么不起作用。

在任何情况下，如果你想为多个视图设置一个模态，你可以用一个服务来做，那个工作就是打开或关闭模态，或者用rootScope上的事件告诉模态＆＃39 ; s控制器应该显示或隐藏模态。

https://docs.angularjs.org/guide/services#creating-services https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope＃$广播

Angularjs：调用bootstrap模态多个视图。

1 个答案: