自定义指令未加载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. 该元素显示在HTML脚本中，但是，自定义指令中未显示任何数据。 My question is how to get my custom directive to display the incoming data from the controller. 我的问题是如何获取自定义指令以显示来自控制器的传入数据。

index.html 的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 app.js

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

controllers/index.js 控制器/ 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 配置/ 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 指令/ news.js

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

views/index.html 意见/ index.html的

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

partials/news.html 谐音/ news.html

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

Answer 1

In your newsWidget directive you are again setting app module so replace 在您的newsWidget指令中，您再次设置了app模块，因此请替换

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

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

jsfiddle 的jsfiddle

自定义指令未加载templateUrl

问题描述

1 个解决方案

解决方案1
0 2017-03-19 17:55:12

自定义指令未加载templateUrl

问题描述

1 个解决方案

解决方案1 0 2017-03-19 17:55:12

解决方案1
0 2017-03-19 17:55:12