Question

我想在我的Angular应用中使用Google Maps API。我正在使用ngMapAutocomplete（https://github.com/iazi/ngMapAutocomplete）。我有从ngMapAutocomplete绑定属性到我的控制器的问题。这是我的代码。

帕格模板：

 form(name='venueForm', ng-submit="vm.submit(venueForm)", novalidate)
  md-toolbar
    .md-toolbar-tools
      h2(translate="VENUE.TITLE")
      span(flex='')
      md-button.md-icon-button(ng-click='vm.cancel()')
        md-icon(md-svg-icon='mdi:close', aria-label='Close dialog')

  md-dialog-content(layout-padding)
    .md-dialog-content.venue-form-content
      span {{vm.nameDetails}}
      div(layout="row")
        md-input-container
          label(translate='VENUE.FORM.NAME')
          input(required, type='text', ng-model='vm.venue.name',
                ng-map-autocomplete, options="{}"
                details="vm.nameDetails", maps-input-change,
                placeholder="Zadejte název venue")

  md-dialog-actions(layout='row')
    span(flex='')
    md-button.md-raised(translate="BUTTONS.CANCEL", ng-click="vm.cancel()",
        aria-label='Cancel')
    md-button.md-raised.md-primary(type="submit", translate="BUTTONS.SAVE",
        ng-click="vm.save()", aria-label='Save venue')

JS代码：

 function VenueFormController($scope) {
        this.$onInit = function () {
          this.nameDetails = {};
          this.cityDetails = {};
          this.addressDetails = {};
          this.cityOptions = {
            types: '(cities)',
          };
          this.addressOptions = {
            types: 'address',
          };
        };

        $scope.$on('GOOGLE_MAPS_AUTOCOMPLETE', function () {
          console.log(this);
          console.log(this.nameDetails);
        }.bind(this));

        this.cancel = function() {
          this.onCancel();
        };

        this.submit = function(form) {
          console.log(this.nameDetails);
          if (form.$invalid) {
            return;
          }

          this.onSave(this.selectedVenue);
        };

      }

  angular.module('gugCZ.webAdmin.venue.form', [
    'hc.marked',
    'ngMapAutocomplete',
    'gugCZ.webAdmin.events.form.orgs',
    'gugCZ.webAdmin.events.form.dates',
    'gugCZ.webAdmin.events.form.venue'
  ])
    .component('venueForm', {
      controller: VenueFormController,
      controllerAs: 'vm',
      bindings: {
        venue: '=',
        onCancel: '&',
        onSave: '&'
      },
      templateUrl: 'app/venue/form/form.html'

    })
    .directive('mapsInputChange', function() {
      return {
        restrict: 'A',
        link: function ($scope, element) {
          element.bind('change', () => {
            $scope.$emit('GOOGLE_MAPS_AUTOCOMPLETE', 
                {details: element.details, value: element.value});
          });
        }
      };
    });

我必须使用自定义指令来处理更改。角度ng变化由于某种原因不起作用。在$scope.$on我有两个控制台日志。首先打印带有nameDetails的控制器的所有属性及其值。但第二个打印undefined。如果我尝试将nameDetails放到模板中，则会显示带有属性的对象。我在按钮单击时添加了console.log(this.nameDetails)，并显示了具有属性的对象。我究竟做错了什么？我查看了ng-autocomplete-source代码，我在绑定中找到了这个：details: '=?'。这不是问题吗？

Answer 1

我很长时间没有使用过Angular 1.x，但这些是我的想法：

input(required, type='text', ng-model='vm.venue.name', ng-map-autocomplete, options="{}"
            details="nameDetails", maps-input-change, placeholder="Zadejte název venue")

1）ng-model ='vm.venue.name'是控制器内的venue.name属性

2）我不确定但是details =“nameDetails”应该是你的范围内的nameDetails属性，而不是你的控制器

3）为了检测更改，您可以在控制器中使用$ scope。$ watch（）

HTH

Angular bindins - 属性在模板中可见，但在控制器函数中未定义

1 个答案: