KendoUI無法在Transclude = true的AngularJS指令中使用

Question

在此示例中，我有兩個AngularJS KendoDatePickers。 如果單擊按鈕，打開日歷，第一個效果很好。 第二個指令位於將transclude屬性設置為true的指令中。 如果單擊第二個按鈕，則會出現錯誤。

我的理解是，被包含部分的范圍是繼承自控制范圍的，因此這應該可以工作。 我哪里錯了？

這是the

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;
}

或使用鏈接功能，並在指令范圍內手動包含元素