如何包括自定义指令的角度JS另一个自定义指令的模板(HTML) [英] How to include custom directive to another custom directive's template(html) in angular js

查看:114
本文介绍了如何包括自定义指令的角度JS另一个自定义指令的模板(HTML)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我哈瓦指令已经(APPVIEW),并有一些HTML通过templateUrl加载。截至目前,我需要多一个自定义指令添加到正在使用由另一个指令(APPVIEW)的模板。

I hava a directive already(appView) and that has some html to load through templateUrl. As of now, I need to add one more custom directive to the template that is being used by another directive(appView).

请参见下面的我的code和预期它不工作。任何帮助我怎么可以使这项工作吗?

Please see my code below and it is not working as expected. Any help on this how i can make this work please?

View.html(模板)

View.html (template)

<div>
    <div class="dragdrop" id="dropzone" dropzone> //here is my custom directive
        <div class="fileUpload btn btn-primary">
        <span>UPLOAD ASSETS</span>
        <input id="dzFile" type="file" class="upload" />
        </div> 
    </div>
</div>

角的js

var appModule = angular.module("Newapp", []);

appModule.directive("appView", appView);
function appView(){
    var directive = {
        restrict: 'E',
        templateUrl: 'app/View.html'
    };
    return directive;
}

appModule.directive("dropzone", function(){  //This is added to the View.html as attribute(see above html code with **)
    var directive = {
        restrict: 'A',
        link: FullDragDrop
    };
    return directive;
});

function FullDragDrop(){
    console.log("soemthing goes here");
}

我怎样才能让这一切成为可能请?

How can I make this possible Please?

推荐答案

这code为我工作。
确保 templateUrl:应用程序/ View.html存在

This code works for me. Make sure templateUrl: 'app/View.html' exists

<script>

var appModule = angular.module("Newapp", []);

    appModule.directive("appView", appView);

        function appView(){

            var directive = {
                restrict: 'E',
                templateUrl: 'view.html'
            };

            return directive;

      }



    appModule.directive("dropzone", function(){  //This is added to the View.html as attribute(see above html code with **)


         var directive = {
                restrict: 'A',
                link: FullDragDrop
            };

            return directive;

    });




    function FullDragDrop(){

        console.log("soemthing goes here");

    }


</script>

<script type="text/ng-template" id="view.html">
   <div class="dragdrop" id="dropzone" dropzone> //here is my custom directive
          <div class="fileUpload btn btn-primary">
          <span>UPLOAD ASSETS</span>
          <input id="dzFile" type="file" class="upload" />
          </div> 
      </div>
</script>

<body>
  <app-view></app-view>
</body>

这篇关于如何包括自定义指令的角度JS另一个自定义指令的模板(HTML)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆