2

私はAngularを初めて使用しますが、何時間もグーグルで検索していて、何が間違っているのか理解できないようです...解決しようとしている問題は、パーシャルがすでにロードされています。この投稿を見つけました：http：//blog.ruedaminute.com/2012/02/angular-js-applying-jquery-to-a-loaded-partial/、ng：viewの代わりにng：includeを使用する方法を説明しています。しかし、それは機能しません-テンプレートは含まれていません、ましてや実行中のonloadは含まれていません。

index.html：

<!DOCTYPE html>
<html ng-app="shorelinerealtors">
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="/lib/angular.js"></script>
    <script src="/lib/angular-resource.js"></script>
    <script src="/js/app.js"></script>
    <script src="/js/controllers.js"></script>
    <link rel="stylesheet" href="/css/style.css">
    <title>Shoreline Realtors</title>
</head>
<body>
<!--It works fine using ng:view, but of course no onload option-->
<!-- <ng:view></ng:view> -->
<!--This apparently does nothing... no hello world, no alert -->
<ng:include src="$service('$route').current.template" scope="$service('$route').current.scope" onload="init()"></ng:include>
</body>
</html>

住宅.html

<h2>{{hello}}</h2>

controllers.js

function ResidentialListCtrl($scope) {
    $scope.hello = "Hello World!";
    this.init = function() {
        alert("hello");
    };

}

app.js

angular.module('shorelinerealtors', ['listingsServices']).
    config(['$routeProvider', function($routeProvider) {
        $routeProvider.
            when('/listings/residential', {templateUrl: '/partials/residential.html', controller: ResidentialListCtrl}).
            otherwise({redirectTo: '/listings/residential'});
    }]);

更新：このためにjsfiddle： http ://jsfiddle.net/xSyZX/7/を作成しました。ngViewでは機能しますが、ngIncludeでは機能しません。グローバルスコープで$serviceを定義するために何かをする必要がありますか？

4

1 に答える 1

2

JQueryを使用して、ロード/処理時にページ上の要素を有効にする場合、その「角度のある方法」は、jQueryが機能するカスタムディレクティブを作成することです。コントローラはDOM操作を行うことを想定されておらず、そのオンロード機能は、実際には、そのインクルード用に設定された「ビジネス」ロジック用です。

処理されるとすぐにいくつかの要素にいくつかのJQueryを適用するディレクティブの例を次に示します。

app.directive('moveRightOnClick', function() {
    return {
       restrict: 'A',
       link: function(scope, elem, attr, ctrl) {
           //elem is a jquery object if JQuery is present.
           elem.click(function() {
              $(this).animate({ 'left': '+=20' }, 500);
           });
       }
    };
});

そして、これがあなたがそれをどのように使うかです。

<div move-right-on-click>Click Me</div>

それがインクルードのhtmlにある場合、jqueryのものはディレクティブによって自動的に接続されます。

于 2012-10-23T21:13:45.930 に答える