Question

代码：

  <head>
    <script>
    function getLink(link){
        var href = link.getAttribute("data-link");
        if(href == 'urlA'){
            $('#displayContent').attr('ng-include',"'abc/urlA.html'");
            }
        if(href == 'urlB'){
            $('#displayContent').attr('ng-include',"'abc/urlB.html'");
            }
        if(href == 'urlC'){
            $('#displayContent').attr('ng-include', "'abc/urlC.html'");
            }
        }
    </script>    
</head>
<body ng-controller="myController">
    <ul>
        <li data-link="urlA" onclick="getLink(this)">Include Url A</li>
        <li data-link="urlB" onclick="getLink(this)">Include Url B</li>
        <li data-link="urlC" onclick="getLink(this)">Include Url C</li> 
    </ul>
    <div id="displayContent"></div>
</body>

div将成为<div id="displayContent" ng-include="'abc/urlA.html'></div> 当我点击第一个列表项时，但该页面没有包含＆＃34; urlA.html＆＃34;。

谁能告诉我这个错误？
顺便说一下，当我写的时候，页面包含了另一页
<div id="testing" ng-include="'abc/urlA'"></div>

Answer 1

尝试将“'abc / urlA.html'”更改为“abc / urlA.html”，在脚本标记内的B和C中相同

Answer 2

在＆＃34; onclick＆＃34;回调你不在＆＃34; Angular Context＆＃34;。

你可以：

从＆＃34; onclick＆＃34;到＆＃34; ng-click＆＃34;

<li data-link="urlA" ng-click="getLink(this)">Include Url A</li>

使用$ scope。$ apply（）

手动应用角度上下文

function getLink(link){

    $scope.$apply(function () {

        var href = link.getAttribute("data-link");
        if(href == 'urlA'){
            $('#displayContent').attr('ng-include',"'abc/urlA.html'");
        }
        if(href == 'urlB'){
            $('#displayContent').attr('ng-include',"'abc/urlB.html'");
        }
        if(href == 'urlC'){
            $('#displayContent').attr('ng-include', "'abc/urlC.html'");
        }
    });
}

当然你需要一个Controller来操作$ scope。

如何在点击后将ng-include添加到div中

2 个答案: