Пользовательские директивы не загружают templateUrl

Я создал пользовательскую директиву для отображения данных, полученных от контроллера. Элемент отображается в 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>


javascript angularjs angularjs-directive angular-template
person Community    schedule 19.03.2017    source источник
comment
В вашем views/index.html попробуйте распечатать {{widget}} и проверьте, обновляется ли он   -  person Gangadhar JANNU    schedule 19.03.2017
comment
Да, он обновляет и дает мне текущий объект, но я бы хотел, чтобы это было внутри пользовательских директив, так как у меня будет много виджетов, таких как новости, спорт и т. д.   -  person    schedule 19.03.2017
comment
Затем вы можете использовать $scope.$watch для отслеживания изменений.   -  person Gangadhar JANNU    schedule 19.03.2017
comment
Хорошо, я попробую это. Какие именно изменения я ищу? Спасибо.   -  person    schedule 19.03.2017
comment
Я предполагал, что двусторонняя привязка области автоматически сделает это.   -  person    schedule 19.03.2017
comment
Это действительно так, однако, если вы используете директиву, вам нужно отслеживать изменения, используя «$scope.$watch».   -  person Gangadhar JANNU    schedule 19.03.2017

Ответы (1)


arrow_upward
0
arrow_downward

В вашей директиве 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

person Gangadhar JANNU    schedule 19.03.2017
comment
Моя пользовательская директива по-прежнему не получает данные объекта от контроллера. - person ; 19.03.2017
comment
@ BM4, можете ли вы быстро создать минимальную рабочую копию своей задачи? - person Gangadhar JANNU; 19.03.2017
comment
МОЙ проект был выполнен модульным способом, поэтому я не уверен, как правильно собрать его вместе в скрипке, но я все же попытался. - person ; 19.03.2017
comment
Все еще нерешенный. Пользовательская директива просто не взаимодействует с контроллером. - person ; 19.03.2017
comment
Для меня это работает, проверьте скрипку в ответе - person Gangadhar JANNU; 19.03.2017
comment
Да, скрипка работает. Подскажите, пожалуйста, для чего нужен сервис $timeout и нужен ли он мне? - person ; 19.03.2017
comment
Я просто использовал его для демонстрационных целей. Вместо $http я использовал $timeout для репликации изменений значения. Вам это не нужно - person Gangadhar JANNU; 20.03.2017