4

我的模板包含 JS，因为它们被称为 JS 未执行，请您有一个想法。

例如，在我的 JS 文件 script.js 中，我有适用于模板中 HTML 元素的方法，但它不起作用，请提供一个想法。

例子 ：

索引.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body ng-app>
    <ng-include src="'header.html'"></ng-include>
    <script src="angular.js"></script>
    <script src="jquery.js"></script>
    <script src="script.js"></script>
</body>
</html>

header.html

<div id="header">
<div id="logo">AngularJs</div>
<div id="nav"></div>
</div>

脚本.js

$(document).ready(function(){
    $('#nav').html('<ul><li><a href="">Link<a></li></ul>');
});

该脚本执行良好，我感觉它没有找到元素 div#nav。

4

3 回答 3

11

Youssef 提供的解决方案可以“更加 Angular”，并且不需要 jQuery：

<!-- template2.html -->
<script type="text/ng-template" id="template2.html">
    <p ng-class="color">Content of template2.html</p>
</script>

$scope.myFunction = function() {
    $scope.color = 'red';
}

http://jsfiddle.net/mrajcok/MfHa6/

在 Angular 世界中，我们尝试更改模型属性（例如，$scope.color）并让视图自动更新。我们尽量不通过 ID 或 jQuery 选择器查找元素，并且我们尽量避免在控制器中进行 DOM 操作——例如，$('#tpl2').addClass('red');

于 2012-10-09T15:06:58.973 回答
2

对不起，我读错了你问题的一部分，我的错误。

jQuery 的 DOM 就绪语句可能无法正常工作。您可以在 ngInclude 标记上添加一个 onload="FUNCTION_NAME" ，其中包含您在 script.js 中指定的 DOM 版本

有关更多信息，请查看此处的文档：http://code.angularjs.org/1.0.1/docs-1.0.1/api/ng.directive: ngInclude

--- 旧帖 ---

@YoussefElMontaser，您不必在 ngInclude 上加上引号：

<ng-include src="header.html"></ng-include>

可能这就是你的脚本没有前进的问题。让我知道这是否有效。

于 2012-09-04T12:58:26.643 回答
1

我找到了解决方案：

http://jsfiddle.net/esjeY/

HTML

<div ng-app="">
    <div ng-controller="Ctrl">
        <select ng-model="template" ng-options="t.name for t in templates">
            <option value="">(blank)</option>
        </select>
        url of the template: <tt>{{template.url}}</tt>
    </div>
    <div ng-include src="template.url" onload='myFunction()'></div>
</div>

JS

function Ctrl($scope) {

    $scope.templates = [{
        name: 'template1.html',
        url: 'template1.html'
    }, {
        name: 'template2.html',
        url: 'template2.html'
    }];

    $scope.template = $scope.templates[0];

    $scope.myFunction = function() {

        $('#tpl2').addClass('red');            
    }
}

@guiligan：感谢您的帮助。

于 2012-09-05T09:53:30.697 回答