Question

我正在使用angular 1.x，我创建了一个名为slider的自定义指令，如下面的代码。

我正在尝试transclude slider指令的内容，以便在transclude函数内修改它。但问题是克隆没有给出.slide元素的集合。相反，它给出了与ng-repeat相关的评论。我无法得到ng-repeat的编译输出，它应该是.slide divs.的集合我想知道如何在ng-repeat函数内访问transclude的结果，这样我才能成功致电scope.showCurrent.现在发生的事情是，$('.slide') scope.showCurrent()内的.slide调用无法捕获任何.slide div，因为在通话时没有ng-repeat元素。但如果$('.slide')在transclude函数中提供了已编译的html，app.directive('slider', function ($compile) { return { restrict: 'EA', priority: 1200, scope: true, controller: function ($scope) { $scope.slider = { currentIndex: 0 }; }, transclude:'element', link: function (scope, el, attrs, ctrl, transclude) { scope.showCurrent = function (currentIndex) { console.log('x') $('.slide').hide(); $('.slide').eq(currentIndex).show(); } scope.$watch('slider.currentIndex', function (val) { console.log('tst'); scope.showCurrent(val); }); transclude(scope, function (clone) { el.after(clone); scope.showCurrent(scope.slider.currentIndex); }) }, } });将捕获div。

<slider>
  <div ng-repeat="slide in slides" class="slide">
     <div>Image {{img}}</div>
     <img ng-src="img"/>
   </div>
</slider>

以下是该指令的html用法。

private void openDialog() {
    LayoutInflater inflater = LayoutInflater.from(TrueAct.this);
    View subView = inflater.inflate(R.layout.newdialog, null);
    AlertDialog.Builder builder = new AlertDialog.Builder(this);
    builder.setMessage("Enter New");
    builder.setView(subView);

    blEntryExistToday = true;
    builder.setPositiveButton("ADD", null);
    builder.setNegativeButton("CANCEL", null);

    final AlertDialog alertDialog = builder.create();

    alertDialog.setOnShowListener(new DialogInterface.OnShowListener() {
        @Override
        public void onShow(final DialogInterface dialog) {
            Button positiveButton = alertDialog.getButton(AlertDialog.BUTTON_POSITIVE);
            positiveButton.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (!blEntryExistToday) {
                        //CLOSE DIALOG
                        dialog.dismiss();
                    } else {
                        tvM.setText("An entry for this day already exist!");
                        //DO NOT CLOSE DIALOG
                    }
                }
            });

            Button negativeButton = alertDialog.getButton(AlertDialog.BUTTON_NEGATIVE);
            negativeButton.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(MainActivity.this, "Cancel", Toast.LENGTH_LONG).show();
                    //CLOSE THE DIALOG
                    dialog.dismiss();
                }
            });
        }
    });

    alertDialog.show();
}

这是我的插件 https://plnkr.co/edit/m7YJBNuDjeLPaKkUYK5S?p=preview

Answer 1

你没有得到.slide divs，因为当你的transclude内的代码被执行时：

el.after(clone);
scope.showCurrent(scope.slider.currentIndex);

内部内容的链接功能，特别是ng-repeat的链接功能，尚未执行。在此链接功能中，为slides添加了一个观察者。

即使您等到链接功能执行，如下所示：

transclude(scope, function (clone) {
    el.after(clone);
    scope.showCurrent(scope.slider.currentIndex);
})
// here the linking functions of the `clone` have already been executed

在第一个摘要循环运行之前，

.slide divs仍然无法使用。

更新后

你绝对不需要这部分

transclude(scope, function (clone) { 
    el.after(clone); 
    scope.showCurrent(scope.slider.currentIndex); 
})

因为clone处理的ng-transclude与ng-transclude不同并且div .slider将负责编译和链接内容。您必须等到摘要循环运行并且ng-repeat呈现$timeout元素。为此，请使用$timeout(function() { scope.showCurrent(scope.slider.currentIndex); });：

allObjects

如何修改自定义指令的被转换内容？

1 个答案: