Load templates dynamically

0

How to load a template inside a controller in angularJs

function PostCtrl($scope,$http, $compile, $rootScope, CONFIG) {


  $scope.patternUrl = (function() {
      var regexp = /(https?:\/\/[^\s]+)/gi;
      return {
        test: function(value) {
          //return regexp.test(value);
          if (regexp.test(value)) {
            $scope.form = {
                    name: name,
                }

              return  $scope.$watch('form', function(newVal, oldVal){
                  $http({
                     url: CONFIG.APIURL + 'post/ajaxcheck',
                     method: "POST",
                     data: {'query':newVal}
                   }).success(function (data, status, headers, config) {
                       var publisher = $('.timeline');

                       publisher.data('scrabing', data);
                       var template = "<div ng-repeat='item in items' ng-include='users.html'></div>";
                       $('.publisher-timeline').html(template).fadeIn();

                      var scope = $rootScope.$new();
                      scope.items = [ { name: data.data }, { name: 'Tu' } ];
                      $compile(document.getElementById('pub'))(scope);
                     }).error(function (data, status, headers, config) {
                        //ERROR


                   });


          }, true);


          }
        }
      };
    })();


}

in my index.html

<div class="mdl-grid" ng-controller="PostCtrl">
  <div class="publisher-timeline" id="pub">
          <script type="text/ng-template" id="users.html">
                <p>{{ item.title }}</p>
              </script>
           </div>
</div>

should show me the load of data sent or loaded in the controller

I leave my code after it's finished and read about the directives to see if anyone could help you in the future

    'use strict';

    /**
     * @ngdoc function
     * @name apiFromApp.controller:PostcontrollerCtrl
     * @description
     * # PostcontrollerCtrl
     * Controller of the apiFromApp
     */
    angular.module('apiFromApp')
      .controller('PostCtrl', PostCtrl)
      .directive('ngResponsivePosts', function factory() {
      var directiveDefinitionObject = {
        restrict:"E",
         templateUrl:"views/post-datails-template.html",
         scope:{
           data:"="
         }
      };
      return directiveDefinitionObject;
    })
    .filter('trusted', ['$sce', function($sce) {
        return function(val) {


        return $sce.trustAsHtml(val);
     };
}]);

PostCtrl.inject = ['$scope', '$http', '$compile', '$rootScope', 'CONFIG'];

function PostCtrl($scope,$http, $compile, $rootScope, CONFIG) {
  $scope.renderHTML = function(html_code)         {
            console.log(html_code);
            return $sce.trustAsHtml(html_code);
        };

  $scope.patternUrl = (function() {
      var regexp = /(https?:\/\/[^\s]+)/gi;
      return {
        test: function(value) {
          //return regexp.test(value);
          if (regexp.test(value)) {
            $scope.form = {
                    name: name,
                }

              return  $scope.$watch('form', function(newVal, oldVal){
                  $http({
                     url: CONFIG.APIURL + 'post/ajaxcheck',
                     method: "POST",
                     data: {'query':newVal}
                   }).success(function (data, status, headers, config) {
                       var publisher = $('.timeline');
                       publisher.data('scrabing', data);
                      // console.log(data.data);
                       $scope.postsDetails=data.data;

                     }).error(function (data, status, headers, config) {
                        //ERROR


                   });


          }, true);


          }
        }
      };
    })();


}
    
asked by vdjkelly 03.05.2016 в 22:06
source

0 answers