Angular: ng:include 用于当前模板和范围？答案

【问题标题】：Angular: ng:include for current template and scope?Angular: ng:include 用于当前模板和范围？
【发布时间】：2012-10-22 02:03:47
【问题描述】：

我是 Angular 的新手，但我已经用谷歌搜索了几个小时，似乎无法弄清楚我做错了什么......我试图解决的问题是能够在之后执行一些 jQuery部分已加载。我找到了这篇文章：http://blog.ruedaminute.com/2012/02/angular-js-applying-jquery-to-a-loaded-partial/，它解释了如何使用 ng:include 而不是 ng:view，但它不起作用 - 没有包含模板，更不用说正在执行的 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 吗？

【问题讨论】：

您能否在ng-include 指令范围内定义$service 的位置显示您的代码？
嗯...也许这就是我所缺少的？我没有在任何地方定义 $service 。你能举个例子说明我会怎么做吗？
我设法让它与一个迂回的解决方案一起工作：jsfiddle.net/xSyZX/11。但是，我没有意识到 onload 在部分被评估之前执行，所以它仍然不会做我想要的。我和我一起工作的人谈过，他建议要么将它封装到一个 jquery 插件中，然后使用 angularui 的 jQuery Passthrough，或者如果这不起作用，则为它创建一个自定义指令。

标签： jquery angularjs

【解决方案1】：

如果您想使用 JQuery 在加载/处理页面上的元素时对其产生影响，那么“角度方式”就是创建一个自定义指令，让 jQuery 为您工作。控制器不应该进行 DOM 操作，并且 onload 功能实际上是为该包含设置的“业务”逻辑设置的。

这是一个指令示例，该指令在处理某个元素后立即将一些 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 的东西会被指令自动连接起来。

【讨论】：