Question

下面的代码将KendoWindow包装在一个指令中。目标是双重的：（1）通过$ broadcast打开/关闭KendoWindow并且避免在控制器中具有窗口打开/关闭方法（因为这些方法修改DOM而不是模型），以及（2））使用transclusion在组件中定义将在KendoWindow中显示并在控制器中处理的子元素。

问题是这些元素没有显示在KendoWindow（see plunk）中，并且drow down列表不起作用。这段代码出了什么问题？

HTML：

  <button ng-click="open()">Open window</button>
  <button ng-click="close()">Close window</button>

  <div my-window title="'This is the title'">
      <p>Some HTML content</p>
      <a href="#">This is a link</a>
      <select kendo-drop-down-list="ddl" style="width: 200px" k-options="ddlOptions">
          <option>xxx</option>
          <option>yyy</option>
          <option>zzz</option>
      </select>
  </div>

使用Javascript：

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

 function MyCtrl($scope) {

     $scope.open = function () {
         $scope.$broadcast('open');
     };


    $scope.close = function () {
         $scope.$broadcast('close');
    };


    $scope.ddlOptions =  {

      select: function() {
        alert('selected');
      }
    }; 
}

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

    var directive = {};

    directive.restrict = 'AE';

    directive.transclude = true;

    directive.scope = { title: '=' };

    directive.template = '<div kendo-window="win" k-width="500" k-visible="false" ng-transclude></div>';

    directive.link = function(scope, element, attrs) {


        var init = function() {
            scope.win.title(scope.title);
         };


        scope.$on("open", function(){
            scope.win.center();
            scope.win.open();
        });


       scope.$on("close", function(){
           scope.win.close();
       });


    scope.$on("kendoWidgetCreated", function(event, widget){

        if (widget === scope.win ) {
            init();
        }

    });


 };


 return directive;

});

KendoWindow AngularJS：未显示已转换的元素

0 个答案: