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

Question

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

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）。您可以使用一个处理组件数据的漂亮工厂来完成。您没有提供有关您的日期选择器和控制器的任何信息，因此我创建了一个抽象示例，为您提供基本处理。

<强>＆GT;通过工厂在控制器之间共享数据 - 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;
    }
  }
});