自定義指令未加載templateUrl

Question

我創建了一個自定義指令來顯示從控制器檢索的數據。 該元素顯示在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

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

控制器/ 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.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);
}]);

指令/ news.js

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

意見/ index.html的

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

諧音/ news.html

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

Answer 1

在您的newsWidget指令中，您再次設置了app模塊，因此請替換

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

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

的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