元素指令不起作用

Question

我正在使用Yeoman所以我不知道它是否导致这个元素指令不起作用。所以这个html模板没有显示出来。我尝试使用include来查看我的代码是否有问题并且包括工作......所以我的指令出了问题。请帮忙！

这是我调用指令元素的索引：

<div class="announcements">
  <div class="announcement-block">
    <announcement-block-update></announcement-block-update>
  </div>
</div>

这是我的javascript：

(function() {
  var app = angular.module('announcementApp', [
    'ngAnimate',
    'ngAria',
    'ngCookies',
    'ngMessages',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ]);

  app.directive('announcementBlockUpdate',function(){

    var announcementsObject = {
      type: 'UPDATE',
      announcement: 'DISA Maps are almost complete! Look foward to reporting out at the project share next week.'
    };


    return {
      restrict: 'E',
      templateUrl: '../views/update-announcement.html',
      controller: function(){
        this.announcement = announcementsObject;
      },
      controllerAs: 'announcement'
    };

  });


})();

这是我的HTML模板：

<div class="event-highlight update"></div>
    <div class="wrap">
    <div class="announcement-description">{{announcement.type}}</div>
    <div class="announcement">{{announcement.announcement}}</div>
</div>

Answer 1

您的模板有一个额外的结束</div>标记。不确定这是否与您遇到的问题有关。

否则，您的代码看起来很好。你正在html中的某个地方初始化应用程序，对吧？

<div class="announcements" ng-app="announcementApp">

Answer 2

TL; DR

以下方式是基于您发布的内容的工作代码段。

解释

不是尝试指定controllerAs属性，而是在主控制器和指令范围之间设置双向数据绑定。这将允许您简单地更新控制器（来自服务或资源），指令也将自动更新。这要归功于隔离范围，您可以了解有关here的更多信息。

代码

＆＃13;

＆＃13;

(function() {
  var app = angular.module('announcementApp', []);

  app.directive('announcementBlockUpdate', function() {


    return {
      restrict: 'E',
      template: '<div class="event-highlight update"></div><div class="wrap"><div class="announcement-description">{{announcement.type}}</div><div class="announcement">{{announcement.announcement}}</div></div>',
      scope: {
        announcement: '='
      }
    };

  });

  app.controller('announcementCtrl', function($scope) {
    var announcementsObject = {
      type: 'UPDATE',
      announcement: 'DISA Maps are almost complete! Look foward to reporting out at the project share next week.'
    };

    // Change the announcement here...
    $scope.announcement = announcementsObject;
  });

})();

＆＃13;

.announcements {
  min-height: 100px;
  border: 1px solid #000;
  padding: 10px;
}
.announcement-block {
  min-height: 20px;
  border: 1px solid #333;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="announcementApp">
  <div ng-controller="announcementCtrl">
    <div class="announcements">
      <div class="announcement-block">
        <announcement-block-update announcement="announcement"></announcement-block-update>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

你的html出错，如下：

<div class="wrap">
    <div class="announcement-description">{{announcement.type}}</div>
    <div class="announcement">{{announcement.announcement}}</div>
</div>

应该在

之内

<div class="event-highlight update"></div>