Question

我要求在指令中我链接了模板URL，它提供了基本的框结构。

enter image description here

现在，我需要加载带有一些数据的动态模板（从服务器获取）。目前在下面的模板我已经使用ng-bind-html所以将动态模板与数据绑定。但是，范围变量没有被编译。

请建议

template ::

 <div>

<div class="panel panel-primary" ng-style="{'background-color':myBgcolor,color:myColor,'width':myWidth+'px'}" ng-repeat="t in getTimes(myWidgetno)  track by $index"> 
            <div class="panel-heading"> 
                <span class="glyphicon glyphicon-th-large"></span>{{myTitle}}

                <div class="btn-group pull-right">
                    <button type="button" class="btn btn-default btn-xs" ng-show="myCollapseoption" ng-click="checked=!checked">
                        <span class="glyphicon glyphicon-chevron-down "></span>
                    </button>    <br/>                    
                </div>
            </div>

            <!-- Add ng-style="{'height':myHeight+'px'}" in collapsable if u want to set height-->
            <div class="panel-body collapsible"   ng-init="checked=true" ng-show="checked" style="clear:both;">
              <div class="pull-right" ng-style="{'color':'black'}"> 
             <span class="glyphicon glyphicon-chevron-down" ng-show="icon_more"></span> 
             <span class="glyphicon glyphicon-pushpin" ng-show="icon_pin"></span> 
             <span class="glyphicon glyphicon-plus" ng-show="icon_share"></span> 
             <span class="glyphicon glyphicon-trash" ng-show="icon_four"></span> 
             <span class="glyphicon glyphicon-cog" ng-show="icon_fifth"></span> 


              </div><!-- All Icons Pull right  -->
              <br/>
            <div ng-bind-html="dynamicData"> </div>
            {{namee}}
           <!--  {{comments}}<p>This is the middle Content</p> <br/><br/><br/> -->
            </div>
        </div>

  </div>

另一个动态模板::

<li ng-repeat="document in documents" >
   DocumentName: <span>{{document.Name}}</span>
</li> -->

指令 ::

// add a directive
app.directive("myBox", function($http,$compile) {
  return {
    restrict: "E",
    scope: {
      items:"=",
      myTitle: "@",   // by value
      myHeight: "@",   // by value
      myWidth: "@",   // by value
      myColor: "@",   // by value
      myBgcolor: "@",   // by value
      myWidgetno: "@", // by reference
      myTemplate:"@",
      myCollapseoption: "@", // by reference            
      save: "&"    // event
    },

     templateUrl:function(el,attrs){ return 'widget.html'; }, 
     controller: function($http,$scope, $element,$sce, $templateCache){
      $scope.namee="anammmmmmm";
      $scope.documents = [];
      $http.get('comment.json').then(function(dataj) {

           console.log('json data is '+dataj);
            $scope.documents = dataj;


         });
       $http.get('template1.html',{cache: $templateCache}).success(function(data) {

           console.log('data is '+data);
            $scope.dynamicData = $sce.trustAsHtml(data);

         });



        $scope.init = function() {
             $scope.icon_more=true;
             $scope.icon_pin=true;
             $scope.icon_share=true;
             $scope.icon_four=true;
             $scope.icon_fifth=true;
        };
      $scope.init();
      // $element.append('trying to append some text'+ $scope.dynamicData);
      $scope.getTimes=function(n){
        //console.log('get time calles'+n);
           return new Array(parseInt(n));
         };

    },
      //"<div><h2>  And This is Title{{myTitle}} </div>",
    replace: false,
    transclude: true,
    link: function (scope, element, attrs) {

        // show initial values: by-val members will be undefined
       console.log("template is "+attrs.myTemplate);


        // change element just to show we can
        element.css("background", attrs.myBgcolor);
        element.css("color", attrs.myColor);
        element.css("width", attrs.myWidth+'px');
        element.css("height", attrs.myHeight+'px');


    }
  }
});

Answer 1

尝试script ng-template：

<div ng-include="dynamicData"></div>
<script type="text/ng-template" id="dynamicData">
  <li ng-repeat="document in documents">
    DocumentName: <span>{{ document.Name }}</span>
  </li>
</script>

或者，如果您需要从文件中加载它：

$scope.dynamicData = 'path/to/template/dynamicData.html'

编辑：这样的事情应该有效：

<!-- master_template.html -->
<section ng-controller="Controller">
  <div ng-include="nestedOne"></div>
  <div ng-include="nestedTwo"></div>
</section>

<!-- nested_template_one.html -->
<h2>I'm nested One</h2>

<!-- nested_template_two.html -->
<p>I'm nested Two</p>

<script>
  app.config( ['$routeProvider', function ($routeProvider) {

    $routeProvider.when( '/', {
      templateUrl: '/path/to/templates/master_template.html',
      controller: 'Controller'
    } );
  }] );
  app.controller( 'Controller', ['$scope', function ($scope) {
    $scope.nestedOne = '/path/to/templates/nested_template_one.html';
    $scope.nestedTwo = '/path/to/templates/nested_template_two.html';
  }] );
</script>

Answer 2

ng-bin-html没有用，所以我找到了一个wokaround。在控制器中，我正在获取数据和模板，然后手动编译模板。

// add a directive
app.directive("myBox", function($http,$compile) {
  return {
    restrict: "E",
    scope: {
      items:"=",
      myTitle: "@",   // by value
      myHeight: "@",   // by value
      myWidth: "@",   // by value
      myColor: "@",   // by value
      myBgcolor: "@",   // by value
      myWidgetno: "@", // by reference
      myTemplate:"@",
      myCollapseoption: "@", // by reference            
      save: "&"    // event

    },
     templateUrl:function(el,attrs){ return 'widget.html'; }, 
     controller: function($http,$scope, $element,$sce, $templateCache,$compile){
      $scope.namee="anammmmmmm";
      $scope.documents = [];

       $http.get('comment.json').success(function(dataj) {

           console.log('json data is '+dataj.name);
            $scope.documents = dataj;

         });

       $http.get('template1.html',$templateCache).success(function(data) {

            var dpk=$compile(data)($scope.$new());
            $element.find('#jhelp').html(dpk);

         });


        $scope.init = function() {
             $scope.icon_more=true;
             $scope.icon_pin=true;
             $scope.icon_share=true;
             $scope.icon_four=true;
             $scope.icon_fifth=true;
        };
      $scope.init();
      // $element.append('trying to append some text'+ $scope.dynamicData);
      $scope.getTimes=function(n){
        //console.log('get time calles'+n);
           return new Array(parseInt(n));
         };

    },
      //"<div><h2>  And This is Title{{myTitle}} </div>",
    replace: false,
    transclude: true,
    link: function (scope, element, attrs) {

        // show initial values: by-val members will be undefined
       console.log("template is "+attrs.myTemplate);


        // change element just to show we can
        element.css("background", attrs.myBgcolor);
        element.css("color", attrs.myColor);
        element.css("width", attrs.myWidth+'px');
        element.css("height", attrs.myHeight+'px');


       element.find('#jhelp').html('Now trying get jquery help');

        // scope.$watch( scope.namee, function(newValue, oldValue) {
        //   console.log('value changeds');

        // });



    }
  }
});

现在它正在编译模板变量。

    <li ng-repeat="document in documents">
   <span>{{$index}} -->{{document.name}}::{{document.age}}</span>
    </li>

在templateURL中包含动态模板

2 个答案: