0

我目前有一個問題,當我在自定義指令中調用ui-tinymce指令時。自定義僞指令用於爲tinymce advlink插件(+將與作爲屬性傳遞的鍵相關聯的加載tinymce選項對象加載到僞指令)從後端動態加載鏈接。ui-tinymce指令用於自定義指令模板:ngModel未更新

這裏是我的控制器:

module.controller('Ctrl', function ($scope) { 
    $scope.test = { 
     val: "gfsgfdgh" 
    }; 
}); 

這裏是我如何調用該指令在HTML:

<tinymce-custom type="minimal" ng-model="test.val"></tinymce-custom>` 

這裏是我的指令:

module.directive('tinymceCustom', function($location, TinyService, Module, GenerateurPage) { 
    return { 
     restrict: 'E', 
     replace: true, 
     require:"ngModel", 
     scope: { 
      ngModel: '=' 
     }, 
     link: function(scope, element, attrs, ngModel){ 

      scope.loaded = { 
       modules: false, 
       pages: false, 
       tinymce: false 
      }; 

      scope.tinyOptions = {}; 

      var link_list = []; 

      var modules = []; 
      var pages = []; 

      Module.findByOrganisme({}, function (data) { 
       data.forEach(function(module) { 
        modules.push({title: module.libelle, value: "/modules/"+module.id}); 
       }); 
       link_list.push({title: "Modules", menu: modules}); 

       scope.loaded.modules = true; 
       initTiny(); 
      }); 

      GenerateurPage.findByOrganisme({}, function(data) { 
       data.forEach(function(page) { 
        pages.push({title: page.titre, value: "/#/generateurPage/afficherPage?id=/"+page.id}); 
       }); 
       link_list.push({title: "Pages", menu: pages}); 

       scope.loaded.pages = true; 
       initTiny(); 
      }); 

      function initTiny() { 
       if (!scope.loaded.modules || !scope.loaded.pages) { 
        return false; 
       } 

       scope.tinyOptions = TinyService.options(attrs.type); 
       console.log(scope); 
       scope.tinyOptions.link_list = link_list; 

       scope.loaded.tinymce = true; 
      } 

     }, 
     template: '<div ng-if="loaded.tinymce"><textarea ui-tinymce="tinyOptions" ng-model="ngModel"></textarea></div>' 
    }; 
}); 

的問題是在使用ed更改文本時,傳遞給ui-tinymce指令的模型不會更新itor,並且編輯器中的文本在控制器模型更改時不會更新...但是,初始ngModel值傳遞給ui-tinymce指令,所以我認爲這是破壞的數據綁定。試圖用$ watch觀看,但沒有任何反應。 我想不出如何解決它,所以我現在正在尋找一些幫助......

THX

回答

0

Finaly固定它改變了做法:

<textarea tinymce-custom="minimal" ng-model="myVar"></textarea > 

最後的指令:

module.directive('tinymceCustom', function($location, $compile, $q, TinyService, Module, GenerateurPage) { 
    return { 
    restrict: 'A', 
    priority:999, 
    terminal:true, // prevent lower priority directives to compile after it 
    scope: true, 
    require: ['?ngModel'], 
    link: function(scope, el, attrs) { 

     // default is basic template 
     var type = attrs.tinymceCustom ? attrs.tinymceCustom : 'basic'; 

     function loadTinyOptions(name) { 
      var loaded = { 
       modules: false, 
       pages: false, 
       tinymce: false 
      }; 

      var link_list = []; 

      var deferred = $q.defer(); 

      var initTiny = function() { 
       if (!loaded.modules || !loaded.pages) { 
        return false; 
       } 

       var tinyOptions = TinyService.options(name); 
       tinyOptions.link_list = link_list; 

       deferred.resolve(tinyOptions); 
      }; 

      Module.findByOrganisme({}, function (data) { 
       var modules = []; 

       data.forEach(function(module) { 
        modules.push({title: module.libelle, value: "/modules/"+module.id}); 
       }); 
       link_list.push({title: "Modules", menu: modules}); 

       loaded.modules = true; 
       initTiny(); 
      }); 

      GenerateurPage.findByOrganisme({}, function(data) { 
       var pages = []; 
       data.forEach(function(page) { 
        pages.push({title: page.titre, value: "/#/generateurPage/afficherPage?id=/"+page.id}); 
       }); 
       link_list.push({title: "Pages", menu: pages}); 

       loaded.pages = true; 

       initTiny(); 
      }); 

      return deferred.promise; 
     } 

     loadTinyOptions(type).then(function(data) { 
      scope._tinyOptions = data; 
      el.removeAttr('tinymce-custom'); // necessary to avoid infinite compile loop 
      el.attr('ui-tinymce', '{{_tinyOptions}}'); 
      $compile(el)(scope); 
     }); 
    } 
}; 

希望這可以幫助。

相關問題