Question

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

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

示例：

的index.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>

的script.js

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

脚本执行得很好，我觉得它找不到元素div＃nav。

Answer 1

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'）;

Answer 2

抱歉，我错误地读了你的一部分问题。

jQuery的DOM ready语句可能无法正常工作。您可以在ngInclude标记上添加一个onload =＆＃34; FUNCTION_NAME＆＃34;包含您在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>

可能这就是你的脚本没有前进的错误。如果有效，请告诉我。

Answer 3

我找到了解决方案：

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：谢谢你的帮助。

AngularJS - 模板：ng Include指令

3 个答案: