【问题标题】:ng-repeat wont work in directive templateng-repeat 在指令模板中不起作用
【发布时间】:2013-08-28 16:57:10
【问题描述】:

我正在尝试在指令模板中使用 ng-repeat,如下所示:

JS

var module = angular.module("myModule", []);

module.directive('direct', function ()
{
    return {
        restrict: 'E',
        controller: "directController",
        // This HTML will replace the direct directive.
        replace: true,
        transclude: true,
        scope: {title: "@"},
        template:
            '<div>'
            // print: this is a title, which is correct
            + '{{title}}'
            + '<br>'

            // print: ["1","2","3"], which is correct
            + '{{list}}'
            + '<br>'

            // doesn't print anything, why ?!                
            + '<div ng-repeat="l in list">{{l}}</div>'
            + '</div>',

        link: function (scope, element, attrs, controller)
        {
             // scope has list in it
             console.log(scope);
        }
    }
});

module.controller('directController', ["$scope", function ($scope)
{
    $scope.list = ["1", "2", "3"];
}]);


angular.bootstrap($('html'),['myModule']);

HTML

<direct title="this is a title"></direct>

结果 HTML

<div>
    this is a title
    <br>
    ["1","2","3"]
    <br>
</div>

如上图,ng-repeat不打印'list', 在打印列表或记录它时,它工作正常,为什么:( ??


更新:

问题在于使用 angular bootstrap 函数注册模块,因为我没有使用 ng-app="myModule" 指令。

如果我使用ng-app="myModule" 指令或注入var module = angular.module("ng"); 模块,它应该可以解决问题。

【问题讨论】:

  • 在&lt;br&gt; 后面有一个未闭合的字符串,跟在{{list}} 后面
  • 很抱歉,输入错误,但这不是问题。

标签: angularjs angularjs-directive angularjs-ng-repeat


【解决方案1】:

请务必将 angular bootstrap 包装在文档就绪函数中。

$(document).ready(function() {
    angular.bootstrap($('html'),['myModule']);
});

在这里结帐:http://jsfiddle.net/CRWAv/

【讨论】:

  • 非常感谢,但是为什么打印列表时有效,而重复时却无效?这是一个错误吗?
【解决方案2】:

Documention 表示您必须在手动引导时执行此操作:

angular.element(document).ready(function() {
  angular.bootstrap(document, ['myModule']);
});

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-05-05
    • 2015-08-07
    • 1970-01-01
    • 1970-01-01
    • 2016-04-04
    相关资源
    最近更新 更多