Угловой компонент не будет отображаться

Question

У меня есть часть 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; 
    } 
})(); 

Answer 1

Вот рабочий код, скорее всего вы не используете vm.values ​​для доступа к данным.

Просто убедитесь, что вы используете правильную версию угловых 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>

Answer 2

Я думаю, что единственная проблема в том, что ваши отсутствующие скобки: angular.module ('х г ') изменение angular.module (' «хуг, [])

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

Как уже упоминалось в комментарии, мне нужно уточнить, проблема может заключаться в том, как ваши файлы JS упорядочены или в комплекте, другой другой JS-файл, выполненный позже, может перезаписать этот модуль, и поэтому вы не увидите никакого обработанного тега.

Answer 3

Определение вашего компонента с использованием bindings не соответствует действительности, указанному в вашей директиве, с использованием scope, хотя оба метода определены как 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-консоли есть ошибки, которые помогут вам в нуле.