Question

我正在尝试将这部分jQuery放入AngularJS指令

      jQuery('#contentpanel').layout(             {
            center__paneSelector: "#centerpanel"
          , west__size: 200
          , west__paneSelector: "#westpanel"
          , west__resizable: true
          , center__onresize: function () {
              if (bpOrgEditor != null) {
                  jQuery("#centerpanel").bpOrgEditor("update");
              }
          }           });

我将其填入HTML属性，以便它看起来像

content-panel="{
               center__paneSelector: '#centerpanel',
               west__size:'200',
               west__paneSelector: '#westpanel',
               west__resizable: 'true'
              }"

并且angular中的指令看起来像这样

 app.directive("contentPanel", function() {
     return function(scope, element, attrs) {
        jQuery(element).layout(scope.$eval(attrs.contentPanel));
    }; 
 });

但是正如我们在本文的第一部分所看到的，jQuery也有一个if / else语句，如何在HTML中注入或者我必须在指令中自己做？如果是这样 - 我该怎么做？

提前致谢！

Answer 1

如果bpOrgEditor是全局的，并且在使用该指令时总是将center__onresize选项设置为该函数，则可以尝试：

app.directive("contentPanel", function() {
    return function(scope, element, attrs) {
       var opts = scope.$eval(attrs.contentPanel);
       opts.center__onresize = function () {
           if (bpOrgEditor != null) {
               jQuery(opts.center__paneSelector).bpOrgEditor("update");
           }
       }
       jQuery(element).layout(opts);
   }; 
});

您可以在200中写true和content-panel="..."，而不是'200'和'true'

将jQuery插件转换为AngularJS指令 - 如何应用if / else？

1 个答案: