AngularJS - 设置指令模板中定义的模型

Question

我有一个如此定义的指令:

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

然后我在html和指令上面有一个按钮,声明如下:

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

我想在按钮ng-click上更改/初始化ng-model ="searchStr"模型.我怎样才能做到这一点？

谢谢你们,Jani

Answer 1

如果我理解正确的话，首先您需要使用 来调用子控制器$broadcast。由于我们不使用隔离范围，因此我们只需从子控制器调用指令方法：

[简短回答]

无隔离范围示例

演示1Fiddle

对于隔离范围，我会将值映射到自动侦听值更改的指令：

隔离范围示例

演示2Fiddle

[完整答案]

无隔离范围示例

超文本标记语言

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

隔离范围示例

超文本标记语言

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