AngularJS - set a model defined in a directives template

Question

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

Answer 1

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