Есть ли в Angular JS аналог реквизита от React JS? - PullRequest
Новая
       13

Есть ли в Angular JS аналог реквизита от React JS?

1 голос
/ 12 ноября 2019

Я изучаю angularJS, и мне было интересно, есть ли такой же реквизит, как в игре. Точнее, способ добавить с помощью реквизита, который я определяю в другом файле. Это сделало бы веб-сайт, который я кодирую на angular, гораздо более эффективным, но я не могу найти аналог на Angular.

1 Ответ

2 голосов
/ 12 ноября 2019

Есть способ сделать что-то подобное в AngularJS. Это называется Директивой. В вашем случае вы хотите создать директиву с restrict, установленным на 'E'.
'E', которая сообщает компилятору, что это будет элемент в сгенерированном HTML. 

angular.module('scopeDirective', [])
.controller('app', ['$scope', function($scope) {
  $scope.naomi = { name: 'Uriel', address: '1600 Amphitheatre' };
  $scope.igor = { name: 'Bitton', address: '123 Somewhere' };
}])
.directive('customer', function() {
  return {
    restrict: 'E',
    scope: {
      customerInfo: '=info'
    },
    templateUrl: 'customer.html'
  };
});

The scope объект после restrict определяет различные атрибуты, которые вы бы хотели, чтобы эта директива принимала. Это похоже на работу реквизита в React. В этом объекте вы можете видеть customerInfo, что соответствует свойству изолята области действия директивы. Значение (=info) указывает $compile на привязку к атрибуту info.
templateUrl отображается в HTML для этой директивы.

Использование директивы выше будет выглядеть примерно так: 

<div ng-controller="app">
  <customer info="uriel"></customer>
  <hr>
  <customer info="bitton"></customer>
</div>

Пожалуйста, обращайтесь к документации AngularJS по Директивам .

ПРИМЕЧАНИЕ. Вместо того, чтобы пытаться что-то делать в AngularJS, аналогично тому, как вы это делаете в Reactили любой другой фреймворк / библиотека, я бы посоветовал вам не использовать возможности текущего фреймворка и использовать его как есть, не пытаясь сравнить способ достижения похожих вещей, так как это может привести к разочарованию в будущем.

Надеюсь, вы найдете этот ответ полезным для своих нужд.

...