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-model =“searchStr”模型。我怎么能这样做？

谢谢你们， 贾尼

Answer 1

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

[简答]

没有隔离范围示例

演示1 Fiddle

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

隔离范围示例

演示2 Fiddle

[完整答案]

没有隔离范围示例

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

隔离范围示例

<强> 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;

        }
      }
    };
  });