Question

在这个例子中，我有两个AngularJS KendoDatePickers。第一个工作完美，如果您单击按钮，您打开日历。第二个是在transclude属性设置为true的指令中。如果单击第二个按钮，则会出现错误。

我的理解是，被转换部分的范围继承自控制范围，因此这应该有效。我哪里错了？

HTML

    <input kendo-date-picker="picker" />
    <button ng-click="openPicker()">Open Date Picker</button>

    <my-window>
        <input kendo-date-picker="picker2" />
        <button ng-click="openPicker2()">Open Date Picker 2</button>
    </my-window>

的Javascript

var app = angular.module("app", [ "kendo.directives" ]);

app.controller('MyCtrl',  function($scope) {

     $scope.openPicker = function () {
        $scope.picker.open();
     };


    $scope.openPicker2 = function () {
        $scope.picker2.open();
    };

});


app.directive('myWindow', function() {


  return {
      transclude: true,
      scope: {
          someVar: '='
      },
      restrict: 'EA',
      template: function(element, attrs) {
            var html = '<div ng-transclude></div>';
            return html;
      }
    };
});

Answer 1

您的代码有两个方面：

首先：创建一个isolatedScope，这样就无法访问指令范围内的控制器范围。

第二：被抄除的内容得到了自己的范围。解决这个问题的一种方法是不使用transclude，如下例所示：

return {
  transclude: false,
  restrict: 'EA',
      template: function(element, attrs) {
        var html = '<div>'+element.html()+'</div>';
        return html;
}

或使用链接功能并手动转换具有指令范围的元素

使用transclude = true，KendoUI无法在AngularJS指令中工作

1 个答案: