如何将自定义指令包含在角度js中的另一个自定义指令模板(html)中

时间:2015-09-30 07:39:32

标签: javascript angularjs angularjs-directive

我已经有一个指令(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>

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

我怎样才能做到这一点?

1 个答案:

答案 0 :(得分:0)

此代码适用于我。 确保 templateUrl:&#39; app / View.html&#39; 存在

<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>