prestashop 在产品管理中添加了额外的选项卡 angular

Question

我正在尝试向 prestashop 产品管理系统添加功能。使用名为 Advprod.

的简单模块

使用 displayAdminProductsExtra 钩子我能够在 prestashop 后台添加部分到产品管理。在这个新部分中，我必须使用 angular。

我的实际 tpl 由 ajax 请求正确加载（以 prestashop 方式），但它从未被 angular 编译。

{literal}

<div id="lspc" class='panel'>
            <p>
                <input data-ng-model="prova" /> {{prova}}
            </p> 
</div>

{/literal}

据我所知，prestashop 构建产品管理部分加载所有选项卡最初是空的，选项卡中的内容是在通过 ajax 之后加载的。我的模块添加的选项卡具有 ID“#product-tab-content-ModuleAdvprod”，它从一开始就作为其他选项卡存在，而其他选项卡是空的。

当包含 tpl 内容的 ajax 响应到达时，选项卡将填充空输入文本和 {{prova}}（未编译）。

Google-我发现 angular 文档中的这篇文章很有用：https://docs.angularjs.org/api/ng/function/angular.injector

所以我尝试在 prestashop 中做同样的事情：

angular.element(document).ready(function(){
    var idappel = "#product-tab-content-ModuleAdvprod"; //this element exists

    var app = angular.module("lspc", []);
    app.controller("MyCtrl", function($scope){
      $scope.prova = "ci siamo";
    });

    /*
    from firebug I can clearly see that these attributes are correctly added
    */
    $(idappel).attr("data-ng-app", "lspc"); 
    $(idappel).attr("data-ng-controller", "MyCtrl");

    $(idappel).on("DOMSubtreeModified", function(){
        /*
        only when:
        - the content tab is changed
        - the tab contain the element with id lspc
        - element with id lspc is visible (user opened tab)
        - the content tab has not classes 'loading' and 'not-loaded'
        */ 
        if($("#lspc").size() 
            && $("#lspc").is(":visible")
            && !$(idappel).hasClass("loading") 
            && !$(idappel).hasClass("not-loaded")){


            $(idappel).unbind("DOMSubtreeModified");
            angular.element($(idappel)).injector().invoke(function($compile) {
                var scope = angular.element($(idappel)).scope();
                $compile($(idappel))(scope);
            });
        }   
    });
});

我总是得到错误 angular.element($(idappel)).injector() 未定义。但我确定 angular.element($(idappel)) 始终是加载的 html 元素。

Google-再多一点我发现有人使用 setTimeout 所以我也尝试这样做：

setTimeout(function(){
    angular.element($(idappel)).injector().invoke(function($compile) {
        var scope = angular.element($(idappel)).scope();
        $compile($(idappel))(scope);
    });
}, 15000);

同样在 15 秒后 angular.element($(idappel)).injector() 结果未定义。

Answer 1

使用 angular.bootstrap 解决。

使用 hookBackOfficeHeader 我包含了一个包含以下内容的 js 文件：

var app = angular.module("lspc", []);
app.controller("MyCtrl", function($scope){
    $scope.prova = "ci siamo";
});

在 tpl 期间我有：

{literal}
<script>
    angular.element(document).ready(function(){
        angular.bootstrap(angular.element($("#lspc")), ["lspc"]);
    });
</script>   
<div id="lspc" class='panel' data-ng-app='lspc' data-ng-controller='MyCtrl'>
    <p>
        <input data-ng-model="prova" /> {{prova}}
    </p> 
</div>

{/literal}

prestashop 在产品管理中添加了额外的选项卡 angular

prestashop add extra tab to product management with some angular

jquery

prestashop

angularjs