6

我有一段 html 我想显示为一个组件，因为我没有操作 DOM。

作为指令，它可以正常工作，但作为组件却不行。我之前做过组件没有问题，只是看不出这里有什么问题。如果我在组件代码中注释，并且指令出来，它就不起作用。

知道我做错了什么吗？

(function() {
"use strict";

angular
    .module('x.y.z')


    // .component('triangularStatus', {
    //     bindings: {
    //         value: '=',
    //         dimension: '=?'
    //     },
    //     templateUrl: '/path/to/triangular-status.html',
    //     controller: TriangularStatusController,
    //     controllerAs: 'vm'
    // });


    .directive('triangularStatus', triangularStatus);

    function triangularStatus() {
        var directive = {
            scope: {
                value: '=',
                dimension: '=?'
            },
            replace: true,
            templateUrl: '/path/to/triangular-status.html',
            controller: TriangularStatusController,
            controllerAs: 'vm',
        };
        return directive;
    }



    TriangularStatusController.$inject = [];
    function TriangularStatusController() {
        var vm = this;
    }
})();
4

3 回答 3

3

这是工作代码，很可能您没有使用 vm.values 来访问数据。

只要确保您使用的是正确版本的 angular js ~1.5

(function(angular) {
angular.module('x.y.z', [])
    .component('triangularStatus', {
        bindings: {
            value: '=',
            dimensions:'=?'
        },
         template: '{{vm.value}} <br/> {{vm.dimensions}}' ,
        controller: TriangularStatusController,
        controllerAs: 'vm'
     });
   TriangularStatusController.$inject = [];
    function TriangularStatusController() {
       
    }
})(window.angular);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<div ng-app = "x.y.z"> 
<triangular-status  value="24" dimensions="348"></triangular-status>
</div>

于 2016-09-16T17:10:58.167 回答
1

组件的定义 usingbindings并不直接等同于指令的定义 using scope，即使两者都被定义为 use controllerAs。这是因为您的组件将直接绑定到控制器，并且您的指令将绑定到$scope（默认情况下）。

我在下面的代码片段中使用了您的代码，稍作修改以允许组件和指令一起使用。我还添加了一个附加指令，bindToController:true用于演示一个指令，该指令的行为更像一个组件，将其属性值直接绑定到控制器，而不是绑定到$scope.

我还使用了一个非常基本的共享模板，它尝试通过在 上查找它们来显示绑定的属性值$scope，然后在vm（ControllerAs）上查找它们。

(function() {
  "use strict";

  var templateBody = '<h2>$scope</h2>' +
    '<p>value: {{value}}</p><p>dimension: {{dimension}}</p>' +
    '<h2>vm</h2>' +
    '<p>vm.value: {{vm.value}}</p><p>vm.dimension: {{vm.dimension}}</p>';

  angular
    .module('x.y.z', [])


  .component('triangularStatusComponent', {
    bindings: {
      value: '=',
      dimension: '=?'
    },
    template: '<div><h1>Triangular Status Component</h1>' + templateBody + '</div>',
    controller: TriangularStatusController,
    controllerAs: 'vm'
  })


  .directive('triangularStatusDirective', triangularStatusDirective)
  .directive('triangularStatusDirectiveBound', triangularStatusDirectiveBound);

  function triangularStatusDirective() {
    var directive = {
      scope: {
        value: '=',
        dimension: '=?'
      },
      replace: true,
      template: '<div><h1>Triangular Status Directive</h1>' + templateBody + '</div>',
      controller: TriangularStatusController,
      controllerAs: 'vm',
    };
    return directive;
  }

  function triangularStatusDirectiveBound() {
    //https://docs.angularjs.org/api/ng/service/$compile#-bindtocontroller-
    var directive = {
      scope: {
        value: '=',
        dimension: '=?'
      },
      bindToController: true,
      replace: true,
      template: '<div><h1>Triangular Status Directive Bound</h1>' + templateBody + '</div>',
      controller: TriangularStatusController,
      controllerAs: 'vm',
    };
    return directive;
  }

  TriangularStatusController.$inject = [];

  function TriangularStatusController() {
    var vm = this;
  }
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="x.y.z">
  <triangular-status-component value="'componentValue'" dimension="'componentDimension'">
  </triangular-status-component>
  <hr>
  <triangular-status-directive value="'directiveValue'" dimension="'directiveDimension'">
  </triangular-status-directive>
  <hr>
  <triangular-status-directive-bound value="'directiveValueBound'" dimension="'directiveDimensionBound'">
  </triangular-status-directive-bound>
</div>

如果您发现您的代码作为指令工作，您的值被绑定到$scope，而不是作为组件，您的值被绑定到控制器，我会假设您的模板 html（很可能？）或您的控制器函数依赖于尝试访问您的值，就好像它们在$scope. 为了确认这一点，您可能会注意到有错误记录到您的 javascript 控制台，这将帮助您归零。

于 2016-09-23T15:42:46.323 回答
0

我认为唯一的问题是，您缺少括号： angular.module('xyz') 更改为 angular.module('xyz', [])

https://docs.angularjs.org/api/ng/function/angular.module

正如评论中提到的，我需要澄清一下，问题可能是您的 JS 文件是如何排序或捆绑的，稍后执行的其他一些 JS 文件可能会覆盖此模块，因此您将看不到任何呈现的标签。

于 2016-09-22T20:51:09.887 回答