自定义指令未加载 templateUrl答案

【问题标题】：Custom directives not loading templateUrl自定义指令未加载 templateUrl
【发布时间】：2017-03-20 10:31:14
【问题描述】：

我创建了一个自定义指令来显示从控制器检索到的数据。该元素显示在 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/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  : '='
    }
  }
}]);

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

&lt;span&gt;{{widget}}&lt;/span&gt;

【问题讨论】：

在您的views/index.html 中尝试打印{{widget}} 并检查它是否正在更新
是的，它会更新并为我提供当前对象，但我希望将其包含在自定义指令中，因为我将拥有许多小部件，例如新闻、体育等。
然后你可以使用$scope.$watch来观察变化
好的，我试试。我到底在寻找什么变化？谢谢。
我认为双向作用域绑定会自动执行此操作。

标签： javascript angularjs angularjs-directive angular-template

【解决方案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

【讨论】：

我的自定义指令仍然没有从控制器接收对象数据。
@BM4 你能快速为你的问题创建一个最小的工作副本吗？
我的项目是以模块化的方式完成的，所以我不确定如何在小提琴中正确地修复它，但我仍然尝试了。
仍未解决。自定义指令似乎没有与控制器通信。
对我来说，它正在检查fiddle的答案