Angularjs：调用引导模式多视图。

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

目前控制器不打开或关闭模态，它唯一的工作是提供模态中显示的信息。如果您单击特定源的添加，则模式将打开，该源名称位于顶部。

我尝试过似乎对其他人有用的事情，但我无法让它为我工作。

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

我正在为 css 使用 twitter 引导程序。

这是我的这个视图的控制器。

.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 上的事件来告诉模态的控制器模态应该显示或隐藏。

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