Question

我是Html / Css / Js的新手，我有以下问题：我想创建某个组件的列表。我已经创建了componentA（完美地工作），现在，在componentB中我想添加ng-include一个特定数量的componentsA但似乎松了我的ng-click事件。

有人能帮助我吗？

稍后编辑：

这是一个组件A： HTML：

<div id="container" class="container"> 
    <p   id="details"   class="details"   ng-show="!pressed" ng-click="Expand();">DETAILS</p>
</div>

JS：

'use strict';

angular.module('app', [])
  .directive('componentA', [function () {

      return {
          templateUrl: 'componentA.html',
          restrict: 'A',
          scope: true,
          controller: function ($scope) {

              $scope.pressed = false;

              $scope.Expand = function() {

                  if ($scope.pressed === true) {
                      $scope.pressed = false;
                      document.getElementById("container").style.width = '550px';
                      document.getElementById("details").style.webkitAnimation = "fadein 3s";
                  }
                  else{
                      $scope.pressed = true;
                      document.getElementById("container").style.width="780px";
                  }
              };
          }
      };
  }]);

在ComponentB中，我正在尝试添加一些像这样的组件：

<div ng-include="'componentA.html'"></div>
<div ng-include="'componentA.html'"></div>
<div ng-include="'componentA.html'"></div>

它显示了组件A，尊重我的css文件中的所有内容，但没有来自我的js文件。

Answer 1

您已创建了一个属性指令 - 因此没有理由使用ng-include（它只会插入模板，而不是逻辑）。

<div component-a></div>

其次，通过控制器操作DOM是不好的做法。看起来在这种情况下，在模板中使用ngClass指令更有意义，而不是更改控制器中的样式。

使用ng-include

1 个答案: