如何在angular js中把自定义指令包含到另一个自定义指令的模板(html)中

How to include custom directive to another custom directive's template(html) in angular js

本文关键字：自定义 指令 html 另一个 js 包含 angular      更新时间：2023-09-26

我已经有一个指令(appView)，它有一些html通过templateUrl加载。到目前为止，我需要在模板中添加另一个指令(appView)正在使用的自定义指令。

请参阅下面我的代码，它没有按预期工作。有什么帮助，我怎么能使这个工作，请?

View.html(模板)

<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");
}

我怎样才能使这成为可能呢?

这段代码适合我。确保templateUrl: 'app/View.html'存在

<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>
相关文章：