Редактировать форму ввода в компоненте angularjs wetheen

Question

Я пытаюсь редактировать форму с angularjs.Дело в том, что я не могу обмениваться данными между shop.component и компонентом редактирования.Я делаю ng-repeat, чтобы получить информацию из службы, а затем, когда я нажимаю кнопку редактирования в компоненте магазина, в компоненте редактирования не определено.вот мой код.

shop.html

    <tbody class="table-hover">
         <tr ng-repeat="(id,local) in $ctrl.locals  | orderBy:sortType:sortReverse | filter: $ctrl.name | filter:$ctrl.address">
            <td>{{local.name}}</td>
            <td>{{local.address}}</td>
            <td>{{local.phone}}</td>
            <td>
                <button ng-click="$ctrl.editShop(id)" class="button expand success">Edit</button>
            </td>
        </tr> 
    </tbody>

shop.component

angular.module('app')
    .component('articleComponent', {
        bindings: {
            name: '<',
            address: '<'
        },
        templateUrl : 'app/articles/articles.html',
        controller : function(deliveryService, $location, $scope){

            this.locals = deliveryService.getDetailLocals() 

            this.sortType= 'name'; 
            this.sortReverse = true;

            this.editShop = function(id){
                $location.path("/edit/" + id) 
            }
        }
    })

edit.html

<form>
  <fieldset>
    <legend>{{ textButton }}</legend>

    <div class="row">
      <div class="large-12 columns">
        <label>name</label>
        <input type="text" placeholder="name" ng-model="local.name" required>
      </div>
    </div>

    <div class="row">
      <div class="large-4 columns">
        <label>Adress</label>
        <input type="text" placeholder="Edad" ng-model="local.adress" required>
      </div>
    </div>
    <button type="submit" class="button large-12">{{ textButton }}</button>
  </fieldset>
</form>

edit.component.js

angular
.module('app')
.component('editComponent', {
    bindings: {},
    templateUrl: 'app/edit/edit.html',
    controller: function ($scope, $routeParams) {
        $scope.textButton = "Edit user";
        console.log($scope.local) // --> undefined
        console.log($routeParams) // --> {id:'0'}
    }
})

service.js

angular.module('app')
.service('deliveryService', function(){
    this.getDetailLocals = function () {
        return [
            {name: 'Bar BQ', address: 'St. 12 nro 1587', phone:'456 715 42'},
            {name: 'XXX Bar', address: 'St. 44 nro 1548', phone:'156 715 42'}
        ]
    }
})

Я знаю, отправляю ли я 'local' в функцию ng-click, отправляю ли весь объект, что я теряю сгенерированный с помощью id номернг-повтор ...

любая помощь?Спасибо!!Пил

Answer 1

Вы можете в любое время получить значение, используя deliveryService, вы можете вызвать метод getDetailLocals, как то, что вы вызывали внутри article-component.

controller: function ($scope, $routeParams, deliveryService) {
    $scope.textButton = "Edit user";
    var locals = deliveryService.getDetailLocals();
    var selectedItem = locals.filter(function(local) {
        return local.id == $routeParams.id
    })
    console.log(selectedItem && selectedItem[0])
}