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

我的目标是将模态移出源代码视图，并将其移到自己的视图中，但由于某些原因，模态没有显示出来。我已经试着将模式放入指令中，但它不起作用。我已经将模式移动到了索引页，但是当模式打开时视图会改变

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

---

你能把它放在一个简化的jsfiddle中吗？我不确定你想要实现什么，什么不起作用

在任何情况下，如果您想为多个视图创建一个单一模式，您可以使用一个服务来实现这一点，该服务的任务是打开或关闭模式，或者使用rootScope上的事件来告诉模式的控制器应该显示或隐藏模式

$rootScope.Scope$broadcast

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