比使用 $broadcast 更新指令中的输入更好的方法？

Question

目前我在控制器 A 上有一个联系人列表。当我单击其中一个联系人时，它会将联系人信息广播到 控制器 B 和中的日期选择器指令控制器 B。这是可行的，但是否有更好的方法来更新日期选择器指令的输入？

app.directive('datePickerDirective', [function () {
    return {
        restrict: 'AE',
        require: 'ngModel',
        scope: {
            datepickerNgModel: '=',
            datepickerId: '@'
        },
        templateUrl: 'Content/app/directives/templates/DatePicker.html',
        link: function ($scope, element, attrs, ngModel) {
            $scope.$watch(function () {
                ngModel.$setViewValue($scope.datepickerNgModel);
                return ngModel.$modelValue;
            });

            $scope.$on('data-from-component-a', function (event, data) {
                $('#' + $scope.datepickerId).val(data.date);
            })
        }
    }
}]);

Answer 1

我会避免在这里使用事件 ($broadcast)。您可以使用处理组件数据的漂亮工厂来实现。您没有提供有关日期选择器和控制器的任何信息，因此我创建了一个抽象示例来为您提供基本处理。

> 通过工厂在控制器之间共享数据 - demo fiddle

查看

<div ng-controller="MyCtrl">
  <button ng-click="publishData()">
    Publish data
  </button>
  <button ng-click="resetData()">
    Reset data
  </button>
</div>
<div ng-controller="MyOtherCtrl">
  <my-directive my-model="data.getData()"></my-directive>
</div>

AngularJS申请

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope, myFactory) {

  $scope.publishData = function() {
    myFactory.publishData();
  }

  $scope.resetData = function() {
    myFactory.resetData();
  }
});

myApp.controller('MyOtherCtrl', function($scope, myFactory) {
  $scope.data = myFactory;
});


myApp.directive('myDirective', function () {
    return {
      restrict: 'E',
      template: '{{myModel}}',
      scope: {
        myModel: '='
      },
      link: function (scope, element, attrs) {
          scope.$watch('myModel', function (newValue, oldValue) {
            console.log(newValue);
            // $('#' + $scope.datepickerId).val(newValue);
          });
      }
    }
});

myApp.factory('myFactory', function() {
  return {
    contactInfo: '',

    publishData: function() {
      this.contactInfo = 'Sdfsdfsdf';
    },

    resetData: function() {
      this.contactInfo = null;
    },

    getData: function () {
      return this.contactInfo;
    }
  }
});

比使用 $broadcast 更新指令中的输入更好的方法？

Better approaches than using $broadcast to update input in directive?

javascript

angularjs

angularjs-directive

查看

AngularJS申请