javascript - AngularJS 如何创建具有 HTML 内容的指令？

Question

我正在尝试创建一个指令，该指令将加载页面并使其在服务和范围内可用，并且它将在指令元素中包含内容。

这应该是非常 self 解释(简化)的我尝试做的事情:

<cms-page page-id="829">
    <h1>Testing</h1>
    <ul ui-sortable ng-model="pageData.sections.main">
        <li ng-repeat="element in pageData.CmsPage.sections.main track by $index">
            <div ng-include="'/templates/cms/elements/' + element.element_type + '.html'"></div>
        </li>
    </ul>
    <pre>{{pageData | json}}</pre>
</cms-page>

现在的问题是它不显示 {{pageData}}。我如何创建一个指令来显示现有标记并解析现有标记和子指令？

这是我的指令:

angular.module(cms).directive('cmsPage', ['CmsPage', 'CmsPagesService', function(CmsPage, CmsPagesService) {
    return {
        restrict: 'E',
        transclude: true,
        template: '<div ng-transclude></div>',
        scope: {
            pageId: '@pageId'
        },
        controller: function($scope) {
            $scope.pageData = {};
            CmsPagesService.get($scope.pageId).then(function(result) {
                if (result.status == 'success') {
                    $scope.pageData = result.data;
                } else {
                    throw 'Page failed to load.';
                }
            });
            $scope.$watch('pageData', function() {
                CmsPage.setPage($scope.pageData);
            });
        }
    };
}]);

Answer 1

您的问题来自您嵌入的内容所绑定(bind)的范围。它可能看起来好像您的 <cms-page> 中的 html标签继承了 cms-page 上的独立作用域指令 - 一个合理的假设，因为它嵌套在其中 - 但实际上它没有。默认情况下，嵌入的内容将遵循其来源的范围。

这样做的结果是，在实践中，您有两个平行的作用域 - pageData 所在指令上的独立作用域。存在，并且管理您的标记的原始范围在哪里 pageData未定义(您的嵌入 html 绑定(bind)到的就是这个范围)。您可以采用两种方法来纠正此问题:

指令模板

如前所述，这里似乎没有理由需要嵌入。这似乎是一个相当常规的指令，指令 html 可以存在于指令本身:

HTML:

<cms-page page-id="829"></cms-page>

指令:

template: // the original html to be transcluded

这有几个优点:

• 如果在多个地方需要指令，则嵌套标记无需重复
• pageData本质上绑定(bind)到正确的范围
• 您的标记更直观；任何不熟悉您的代码的人都会感到困惑 pageData来自查看您的原始 html

如果需要变量模板，可以使用模板函数动态选择一个:

HTML:

<cms-page page-id="829" page-template="templateA"></cms-page>

指令:

template: function(tElem, tAttrs) {
  if(tAttrs.pageTemplate) {
    return '<div>...</div>';
  }  // and so on...
}

手动嵌入

如果由于某种原因您不能使用指令模板，那么您可以自己将内容嵌入并将其指向任何范围，而不是通过将内容与从中获取的范围相关联来进行 Angular 嵌入您的内容你先请。 transclude 函数可用作链接函数的第五个参数:

transclude: true,
template: '<div></div>',
scope: {
  pageId: '@'
}
link: function(scope, elem, attrs, ctrl, transclude) {
  transclude(scope, function(clone) {
    // transcluded html is now bound to the isolated scope of the directive
    // therein making pageData accessible "externally"
    elem.append(clone);
  });
}