4

私のテンプレートにはJSが含まれています。JSは実行されないと呼ばれているので、アイデアを持ってください。

たとえば、私のJSファイルscript.jsには、テンプレートの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が見つからないと思います。

4

3 に答える 3

11

Youssef が提供するソリューションは「より角度のある」ものにすることができ、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 に答える
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 に答える