Any recommendations for updating input in a directive without relying on $broadcast?

Question

Any recommendations for updating input in a directive without relying on $broadcast?

I am currently facing an issue with my contact list on controller A. Whenever I select a contact, the contact's information gets broadcasted to controller B and also to the datepicker directive in controller B. Although this method works, I am wondering if there is a more efficient way to update the input on the datepicker directive?

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);
            })
        }
    }
}]);

javascript angularjs angularjs-directive

Answer 1

Answer №1

Instead of using events like $broadcast, I recommend utilizing a factory to manage data for your components. Without details about your datepicker and controllers, I've provided a generic example to demonstrate the basic approach.

> Transfer data between controllers using a factory - view demo fiddle

View

<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 application

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;
    }
  }
});

Answer 2

Instead of using events like $broadcast, I recommend utilizing a factory to manage data for your components. Without details about your datepicker and controllers, I've provided a generic example to demonstrate the basic approach.

> Transfer data between controllers using a factory - view demo fiddle

View

<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 application

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;
    }
  }
});

Any recommendations for updating input in a directive without relying on $broadcast?

Answer №1

View

AngularJS application

Similar questions

Tips for accurately determining the count, rather than the character length, of JSON data

Getting the environment variable from Rails in your JavaScript: A guide

When a previous form field is filled, validate the next 3 form fields on keyup using jQuery

The functionality of Vue.js checkboxes is not compatible with a model that utilizes Laravel SparkForm

Circular Dependency occurs when child objects are created using the AngularFire ObjectFactory

Implement the maskmoney library in your input fields

Guide to importing an npm package into a client-side file

How to display content in separate divs using jQuery hover functionality

Updating a ReactJS component based on the selected value

Unlocking the Power of Transition: Effortlessly Submitting a Form Post

The Dropbox picker is now launching in a new tab instead of a new window when using Chrome

Modify the class's height by utilizing props

Two interconnected queries with the second query relying on the results of the first

What is the best way to rearrange an array in React?

A guide on encrypting the data of a file that is uploaded in Meteor.js

What could be the reason behind my Javascript code returning "object object"?

Executing a task on a deconstructed item within a JavaScript object

Locating function definitions in etags using Emacs

Steps to update the value of an object stored within an array

What is the best way to retrieve the previously chosen value from one dropdown and populate it into another dropdown when