Question

这有效

<div ng-include="template.html" onload="person='Jane'"></div>

^这会将包含中的本地范围变量person设置为＆＃39; Jane＆＃39; （字符串）

但我想传递一个名为user的人物对象：{name: 'Jane' }

<div ng-include="template.html" onload="person=user"></div>

^这会将包含中的本地范围变量person设置为“未定义”

如何将对象作为局部变量传递给ng-include？

Answer 1

也许你真正想要的是一个自定义指令：

<div person-directive="{name:'Jane'}"></div>

JS：

angular.module('myApp',[])
.directive('personDirective',function(){
    return {
        restrict: 'A',
        scope: {
            person: '=personDirective'
        },
        templateUrl: 'template.html'
    };
});

使用此方法，您可以将传入的值绑定到已加载模板中的person。

Working fiddle

Answer 2

ng-include不是可重用的，因为它没有提供设置局部变量的方法。使用onload很糟糕，因为它会占用全局范围。如果示例稍微复杂一点，它就会失败。

Making a new directive instead of using ng-include是一个更清洁的解决方案。

理想用法如下：

<div ng-include-template="template.html" ng-include-variables="{ person: 'Jane' }"></div>
<div ng-include-template="template.html" ng-include-variables="{ person: user }"></div>

指令是：

.directive(
  'ngIncludeTemplate'
  () ->
    {
      templateUrl: (elem, attrs) -> attrs.ngIncludeTemplate
      restrict: 'A'
      scope: {
        'ngIncludeVariables': '&'
      }
      link: (scope, elem, attrs) ->
        vars = scope.ngIncludeVariables()
        for key, value of vars
          scope[key] = value
    }
)

您可以看到该指令不使用全局范围。相反，该指令从ng-include-variables中读取对象，并将这些成员添加到其自己的本地范围。

这是干净而通用的。

ng-include与对象一起加载

2 个答案: