AngularJs如何在选择字符后重新加载模板页面

我正在使用http.get，我需要在选择一个字符后重新加载一个模板，以便我的模板根据我选择的内容给出答案

模板的代码

<div class="container-fluid" ng-controller="CriterioCtrl">

    <div id="result"></div>

    <div>
        Selected Items:
        <div ng-repeat="id in selection">
            {{id}}
        </div>        
    </div>

    <div ng-repeat-start="crit in data" class="row">
        <h2 align="center">{{crit.name}}</h2>

        <div ng-repeat="caracter in crit.characters" class="col-md-4">
            <div type="checkbox" value="{{caracter.id}}" ng-checked="selection.indexOf(caracter.id) > -1" ng-click="clickSelection(caracter.id)">
                <a href="#crit" class="thumbnail" ng-click="clickCriterios(caracter.id)">
                    <h4 align="center">{{caracter.name}}</h4>
                    <img ng-src="http://skaphandrus.com/{{caracter.image_url}}"/>
                </a>
            </div>
        </div>

    </div>

    <div ng-repeat-end>
    </div>


<!--<button class="btn" ng-click="toggle()">Toggle</button>
<p ng-show="visible">Hello World!</p> codigo de um botao -->

</div>

此代码是另一个控制器中的http部分

MyApp.controller('EspeciesCtrl', function ($scope, $http) {

    $http({
        url: 'someurl', 
        method: "post",
        params: {module_id: localStorage.getItem("idMod"),"characters[]": [localStorage.getItem("idSelect")]}
    })
    .then(function(res){
        $scope.data = res.data;
    });
});

这是选择后必须更改的模板代码

$scope.selection=[];

$scope.clickSelection = function clickSelection(caracterId) {
    var idx = $scope.selection.indexOf(caracterId);
    // is currently selected
    if (idx > -1) {
        $scope.selection.splice(idx, 1);
    }   
    // is newly selected
    else {
        $scope.selection.push(caracterId);
    }
    var selectedId = $scope.selection;  
    console.log(selectedId);
    // Check browser support
    if (typeof(Storage) != "undefined") {
        // Store
        localStorage.setItem("idSelect", selectedId);
        // Retrieve
        document.getElementById("result").innerHTML = localStorage.getItem("idSelect");
    }
};

<div class="container-fluid" ng-controller="EspeciesCtrl">

    <div class="row">
        <div ng-repeat="esp in data" class="col-md-6">
            <a href="#infEsp" class="thumbnail" ng-click="clickEspecie(esp.id)">
                <h4 align="center">{{esp.name}}</h4>
                <img ng-src="{{esp.image_src}}"/>
            </a> 
        </div>
    </div>

</div> 

---

我该怎么做？

编辑1

如果我理解正确，您可能需要使用

ng show

（），其布尔值检查用户是否选择了任何内容并显示所需的额外代码位，而不是尝试另一个http请求

此外，您似乎正在为

esp

和

crit

使用

$scope.data

，因此最终会出现错误

---

您可能不需要重新加载模板。 您可能希望在模板内使用

$scope.data

中的数据，以便Angular管理视图上的更新。只要$scope.data更改，呈现的HTML也会更改

---

我无法发表评论，但如果您可以共享您正在使用的模板，并在您的请求中更具体一些，这将是非常有帮助的：）

您不应该真的需要在angular中设置innerHTML。这就是数据绑定的目的。我知道，但这只是为了最后的测试，不会显示出来。如果您有新的内容要添加，我已经更新了代码。请回答其他问题如何将数组传递给http的参数？我使用了两个带$scope.data的控制器，因此我没有任何错误，谢谢你的帮助，我会尽量使用你推荐的，如果我有任何疑问，我会问你@datamoshSure，别担心，很高兴我给你打了电话！如果你不介意@datamosh，你能给我你的电子邮件或facebook页面，这样我可以以更私密的方式与你交谈吗