Geek Answers Handbook

Angular component will not display

I have a html part that I want to show as a component since I am not manipulating the DOM.

As a directive, it works fine, but as a component, it does not work. I did components without problems before, I just don’t see that the problem is here. If I comment on the component code and directive, it does not work.

Any idea what I did wrong?

(function() { "use strict"; angular .module('xyz') // .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; } })();
+6
source share
3 answers

Here is the working code, most likely you are not using vm.values ​​to access the data.

Just be sure to use the right version of angular js ~ 1.5

 (function(angular) { angular.module('xyz', []) .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 = "xyz"> <triangular-status value="24" dimensions="348"></triangular-status> </div>
+2
source

Defining your component using bindings not a direct equivalent to defining your directive using scope , although both are defined for using controllerAs . This is because your component will be bound directly to the controller, and your directive will be bound to $scope (by default).

I used your code in the snippet below, slightly modified to allow the component and directives to be used together. I also added an extra directive that uses bindToController:true to demonstrate a directive that behaves a bit more like a component that binds its value attribute directly to the controller, and not to $scope .

I also used a very simple generic template that tries to show the values ​​of the attached attributes, looking for them on $scope and then looking for them on 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('xyz', []) .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="xyz"> <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>

If you find that your code works as a directive where your values ​​are tied to $scope , but not as a component where your values ​​are tied to a controller, I would suggest that your html template (most likely?), Or your controller function relies trying to access your values ​​as if they were on $scope . To confirm this, you may notice that there will be errors on your javascript server that will help you from scratch.

+1
source

I think the only problem is that your missing brackets: angular.module ('xyz') change to angular.module ('xyz', [])

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

As mentioned in the commentary, I need to clarify, the problem may be how your JS files are ordered or bundled, some other JS file executed later can overwrite this module, and therefore you will not see any processed tag.

0
source

More articles:


All Articles