Custom directives not loading templateUrl

Question

I have created a custom directive to display data retrieved from the controller. The element is displaying in the HTML script however, no data is being presented in the custom directive. My question is how to get my custom directive to display the incoming data from the controller.

index.html

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>dashful</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="styles/main.css" media="screen" title="no title"> <link rel="stylesheet" href="styles/font-awesome/css/font-awesome.min.css"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-resource/1.6.1/angular-resource.min.js"></script> <!-- <script src="scripts/angular.min.js"></script> --> <!-- <script src="scripts/angular-ui-router.min.js"></script> --> <!-- <script src="scripts/angular-resource.min.js"></script> --> <script src="app.js"></script> <script src="config/config.js"></script> <script src="controllers/index.js"></script> <script type="text/ng-template" src="directives/news.js"></script> <base href="/" target="_blank" /> </head> <body ng-app='app'> <header> <nav class="nav-bar"> <h1 id="brand">dashful</h1> <i id="settings-icon" class="fa fa-cog" aria-hidden="true"></i> </nav> </header> <main class="dashboard"> <section class="dashboard" ui-view></section> </main> <footer class="footer dashboard-footer">Copyright &copy; 739688, MMXVII</footer> </body> </html>

app.js

angular.module('app', ['ui.router']);

controllers/index.js

angular.module('app')
.controller('IndexCtrl', function($scope, $http){
  $http.get('/widgets')
  .then(function(widgets){
    console.log(widgets);
    $scope.widgets = widgets.data;
    return widgets.data;
  })
});

config/config.js

angular.module('app')
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
function($stateProvider, $urlRouterProvider, $locationProvider){
  $stateProvider
  .state('dashboard', {
    url         : '/',
    templateUrl : 'views/index.html',
    controller  : 'IndexCtrl'
  });
  $urlRouterProvider.otherwise('/');
  $locationProvider.html5Mode(true);
}]);

directives/news.js

angular.module('app', [])
.directive('newsWidget', [function () {
  return {
    restrict    : 'E',
    templateUrl : 'partials/news.html',
    controller  : 'IndexCtrl',
    scope       : {
      widget  : '='
    }
  }
}]);

views/index.html

 <section class="widgets"> <article class="widget" ng-repeat="widget in widgets"> <news-widget widget="widget"></news-widget> </article> </section>

partials/news.html

 <span>{{widget}}</span>

Answer 1

In your newsWidget directive you are again setting app module so replace

angular.module('app',[]) with
angular.module('app')

angular.module('app')
    .directive('newsWidget', [function() {
        return {
            restrict: 'E',
            templateUrl: 'partials/news.html',
            controller: 'IndexCtrl',
            scope: {
                widget: '='
            }
        }
    }]);

jsfiddle

Custom directives not loading templateUrl

Question

1 answers

solution1
0 2017-03-19 17:55:12

Custom directives not loading templateUrl

Question

1 answers

solution1 0 2017-03-19 17:55:12

solution1
0 2017-03-19 17:55:12