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 个答案: