AngularJS: миграция из $ scope с компонентами - PullRequest
Новая
       6

AngularJS: миграция из $ scope с компонентами

0 голосов
/ 04 октября 2018

Я пытаюсь заменить некоторые функции в приложении, с которым я работал, $scope и $scope.$parent, где, основываясь на поведении, которое происходит в дочернем компоненте, я могу вызвать метод, хранящийся в родительском компоненте, для значенийв родительском. 

function ChildController($scope) {
    $scope.doThing = function() {
        $scope.$parent.doThing()
    }

function ParentController($scope) {
    ...
    $scope.stuff = {...};
    $scope.doThing = function() {
        // does thing to stuff
    }
}

В эти дни я использую var ctrl = this; больше, и мне интересно, как я должен справиться с этим.Я экспериментировал с привязками компонентов, но казалось, что они были немного не в порядке.Кто-нибудь знает, как лучше это сделать?

Я использую angularjs 1.6.1 и работаю над внутренней системой, поэтому импорт других скриптов на самом деле не вариант.Спасибо за помощь!

1 Ответ

0 голосов
/ 05 октября 2018

Вот пример превращения обоих компонентов в компоненты, вы можете оставить родительский контроллер, если хотите.Большинству людей кажется странным то, что при использовании привязки функции '&' необходимо отправить объект для параметров.Если вам не нужно возвращать параметры, это облегчает :) Надеюсь, это поможет.

Html: 

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>simple component example</title>
  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  <script src="script.js"></script>
</head>
<body ng-app="myApp">
  <parent-component></parent-component>
</div>
</body>
</html>

Javascript: 

(function() {
  'use strict';
  angular
    .module('myApp', [])

    .component('parentComponent', {
      controller: function() {
        var ctrl = this;
        ctrl.handleClick = function(id) { console.log(id) };
      },
      template: '<child-component click-me="$ctrl.handleClick(id)" greeting="hello"></child-component>'
    })

    .component('childComponent', {
      bindings: { greeting: '@', clickMe: '&' },
      template:`
        <div>
          <h1>{{$ctrl.greeting}}</h1>
          <button ng-click="$ctrl.clickMe({id: '101010'})">Run Parent Function</button>
        </div>
      `,
      controller: function() {
        var ctrl = this;
        console.log(this);
      }
    });

})();

Plunker Здесь

Обновлен код для изменения чего-либо в родительском элементе. Обратите внимание, что я изменил привязку приветствия с '@' (строковый литерал) на '<' (в одну сторонуобязательное выражение).Теперь идентификатор, отправленный обратно в родительскую функцию, будет добавлен к переменной приветствия в родительской функции, которая отправляется дочернему элементу для отображения.<strong> Я также обновил плункер 

(function() {
  'use strict';
  angular
    .module('myApp', [])

    .component('parentComponent', {
      controller: function() {
        var ctrl = this;
        ctrl.greeting = 'hello';
        ctrl.handleClick = function(id) { ctrl.greeting += id };
      },
      template: '<child-component click-me="$ctrl.handleClick(id)" greeting="$ctrl.greeting"></child-component>'
    })

    .component('childComponent', {
      bindings: { greeting: '<', clickMe: '&' },
      template:`
        <div>
          <h1>{{$ctrl.greeting}}</h1>
          <button ng-click="$ctrl.clickMe({id: '101010'})">Run Parent Function</button>
        </div>
      `
    });

})();
...