AngularJS - set a model defined in a directives template

angularjs, angularjs-directive

Solution

If I understand you right, first of all you need call child controller with `$broadcast`. Since we don't use isolate scope, we just call directive method from child controller:

[Short answer]

No isolate scope example

Demo 1 Fiddle

For isolate scope, I would map value to directive that listens on value change automatically:

Isolate scope example

Demo 2 Fiddle

[Full answer]

No isolate scope example

HTML

<div ng-controller = "IndexCtrl"> 
  <button ng-click="startNewLog()">Start</button>
   
  <div ng-controller="ItemNewCtrl">
      <my-input></my-input>     
  </div>
</div>

JS

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

app.controller('IndexCtrl', function ($scope) {
    $scope.startNewLog = function(){
     $scope.$broadcast('someEvent');
    };
    
});


app.controller('ItemNewCtrl', function ($scope) {
    $scope.$on('someEvent', function() {
        $scope.callDirective();
    });
    
});

app.$inject = ['$scope'];

app.directive('myInput', function(){
    return {
      restrict: 'E',
       
      template: '<input type="text" ng-model="searchStr" />',
      controller: function($scope){
          
        $scope.searchStr;  
          
        $scope.keyPressed = function(event){
          $scope.showDropdown = true;
         
        }
      },
        link: function(scope, elm, attrs) {
            scope.callDirective = function() {
                scope.searchStr = 'callDirective';
            };
        }
    };
  });

Isolate scope example

HTML

<div ng-controller = "IndexCtrl"> 
  <button ng-click="startNewLog()">Start</button>
   
  <div ng-controller="ItemNewCtrl">
      <my-input my-model='contInput'></my-input>     
  </div>
</div>

JS

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

app.controller('IndexCtrl', function ($scope) {
    $scope.startNewLog = function(){
     $scope.$broadcast('someEvent');
    };
    
});


app.controller('ItemNewCtrl', function ($scope) {
    
    $scope.contInput = '';
    $scope.count = 0;
    
    $scope.$on('someEvent', function() {
        $scope.contInput = 'hey mate';
    });
    
});

app.$inject = ['$scope'];

app.directive('myInput', function(){
    return {
      restrict: 'E',
        scope:{searchStr: '=myModel'},
      template: '<input type="text" ng-model="searchStr" />',
      controller: function($scope){
          
        $scope.searchStr;  
          
        $scope.keyPressed = function(event){
          $scope.showDropdown = true;
         
        }
      }
    };
  });

Problem

I have a directive defined like so: ``` angular.module('directives.myInput', []) .directive('myInput', function($parse, $http, $sce){ return { restrict: 'E', template: '<input type="text" ng-model="searchStr" />', controller: function($scope){ $scope.keyPressed = function(event){ $scope.showDropdown = true; . . . } } }; }); ``` And then I have a button in html and directive above declared like so: ``` <div ng-controller="IndexCtrl"> <button ng-click="startNewLog()">Start</button> <div ng-controller="ItemNewCtrl"> <myInput /> </div> </div> ``` I want to change/initialize ng-model="searchStr" model on a button ng-click. How can I do that? Thanks guys, Jani

Original source