0

我不熟悉有棱角的人,我的头撞在墙上:

我正在制作一个可重复使用的滑块元素,它将生成一个包含在标签中的输入 type="range"。

我希望将指令上定义的属性应用于指令模板中定义的子输入元素,它们确实如此,但它们也被添加到包装标签元素中。这似乎很混乱,我认为我缺少一些基本的东西。

做这个的最好方式是什么?我是否需要使用编译功能,这似乎会破坏在指令中使用模板的目的?

当前的html:

<slider min="0" max="1000" step="1" label="foo" ng-model="slider1" value="750">
</slider>

当前指令:

myApp.directive('slider', function() {
return {
    restrict: 'AE',
    scope:{
        data:'=ngModel',
        min:'@',
        max:'@',
        step:'@',
        label:'@',
        value:'='
    },
    replace: 'true',
    template: '<label>{{label}}<input min="{{min}}" max="{{max}}" step="{{step}}" type="range" ng-model="data" value="{{value}}" />{{data}}</label>'
};

});

电流输出:

<label min="0" max="1000" step="1" label="foo" ng-model="slider1" value="250" class="ng-isolate-scope ng-pristine ng-valid ng-binding">
    foo
    <input min="0" max="1000" step="1" type="range" ng-model="data" value="250" class="ng-pristine ng-valid">
</label>

所需的输出:

<label>
    foo
    <input min="0" max="1000" step="1" type="range" ng-model="data" value="250" class="ng-pristine ng-valid">
</label>
4

2 回答 2

0

这很奇怪。虽然我没有尝试过,但我猜想替换是将滑块元素的属性添加到模板中的第一个元素,即标签。尝试在标签之前在模板中添加另一个元素,并尝试 if replace: false 做同样的事情

<div class="filler></div><label>{{label}}<input min="{{min}}" max="{{max}}" step="{{step}}" type="range" ng-model="data" value="{{value}}" />{{data}}</label>

更新

由于 replate:true 似乎总是添加属性,您可能必须使用 replace:false,并创建一个手动删除元素的编译或链接函数,如

link: function (scope, element, attrs) {    angular.element(element).remove();
于 2014-05-28T14:55:33.030 回答
0

我看到这个问题已经有几个月了,所以你现在可能已经继续前进了,但我还是想回答一下。也许它会帮助其他人。

我现在只使用 AngularJS 大约 3 周,但我觉得你得到的凌乱输出是 AngularJS 的典型特征,毕竟只有在你深入研究生成的 html 时才会变得凌乱。AngularJS 似乎不太关心用标签和属性污染 html - 它似乎(至少在我看来)是关于制作可重用的组件和位,并在编码时更容易使用它们。

我发现最好不要使用替换,因为当您检查 html 时,很难判断您是刚刚使用了指令还是只是将 html 直接放在页面中。此外,文档提到它唯一的真实用例是在您生成 SVG 文档时。

让我在这里用你的例子来说明我想说的:

资源:

<some html />
<slider min="0" max="1000" step="1" label="foo" ng-model="slider1" value="750" />
<some other html />

您想要的结果:

<some html />
<label>
    text
    <input min="0" max="1000" step="1" type="range" ng-model="data" value="250" class="ng-pristine ng-valid" />
</label>
<some other html />

替换结果:

<some html />
<label min="0" max="1000" step="1" label="foo" ng-model="slider1" value="250" class="ng-isolate-scope ng-pristine ng-valid ng-binding">
    text
    <input min="0" max="1000" step="1" type="range" ng-model="data" value="250" class="ng-pristine ng-valid" />
</label>
<some other html />

没有替换的结果:

<some html />
<slider min="0" max="1000" step="1" label="foo" ng-model="slider1" value="250" class="ng-isolate-scope ng-pristine ng-valid ng-binding">
    <label>
        text
        <input min="0" max="1000" step="1" type="range" ng-model="data" value="250" class="ng-pristine ng-valid" />
    </label>
</slider>
<some other html />

我建议,当您检查 html 并看到您想要的结果时,您将如何知道您是刚刚在 html 中编写还是使用了指令。在没有替换的结果中,该指令被明确命名,并且不可能将其误认为是其他任何东西。此外,插入的 html 看起来与您预期的完全一样,标签上没有其他属性。

当然,您可以使用 compile 函数删除@frank 提到的多余元素或属性,但我再次建议,这仍然会使您生成的 html 比没有替换的结果更清晰。

我还要为这个问题的未来查看者指出,AngularJS 指令的替换选项已被弃用,并在文档中带有此通知:([已弃用!],将在下一个主要版本中删除 - 即 v2.0)

请参阅此处的文档:https : //docs.angularjs.org/api/ng/service/ $compile#-replace-deprecated-will-be-removed-in-next-major-release-ie-v2-0-

于 2014-12-08T11:07:18.503 回答