javascript - Angularjs - ng-include 未加载包含模板(无可见错误)

Question

当点击相应的链接时，我试图将各种 html 模板包含到页面上的单个 div 中(我愿意接受更好的想法，这些想法允许我将链接样式设置为图标)..

我不确定为什么 ng-include 没有做任何事情

HTML 文件

    <div ng-controller="loadCtrl">

        <div>
            <ul>
                <li ng-repeat="block in blocks">

                    <a href="#" ng-model="block">
                        {{block.name}} - {{block.ctrl}}
                    </a>

                </li>
            </ul>
        </div>

        <div ng-include="block.ctrl"></div> 

    </div>

js Controller

    app.controller('loadCtrl', function ($scope, $http) {

        $scope.pyctrl = base_data + 'blocks.json';
        $scope.blocks = [];

        $scope.LoadBlocks = function(data, status){
            $scope.blocks = data;
        }

        $scope.fetch = function(){
            $http.get($scope.pyctrl).success($scope.LoadBlocks,console.log("Ok"));
        }

        $scope.fetch();

    });

json 文件

    [
        {
            "name": "block 1",
            "ctrl": "dir1/dir2/template1.html"
        },
        {
            "name": "block 2",
            "ctrl": "dir1/dir2/template2.html"
        },
        {
            "name": "block 3",
            "ctrl": "dir1/dir2/template3.html"
        }
    ]

Answer 1

我认为您希望将 ng-include 保留在 ng-repeat 循环(li 元素)内。

<小时/>

更新:如果您想在单击链接时将值保存在 block 中，则不要使用 ng-model="block"，使用 ng-click="selectedBlock(block") 在作用域上调用执行此操作的函数。

    $scope.block = null;
    $scope.selectBlock = function(block){
        $scope.block = block;
    }