Question

我编写了一个自定义指令来加载3个下拉菜单并处理控制器内部下拉列表的更改事件。在更改下拉列值时，我在控制器功能中获得了更改的值。我需要调用我的自定义指令并传递新值。

我是AngularJs自定义指令的新手。请让我知道如何从控制器中调用指令。

我呈现自定义指令的视图：

<div class="container">
  <div class="main-header clearfix">
    <div class="page-title">
        <h3 class="no-margin">Search for a Host</h3>
    </div>
    <!-- /page-title -->
  </div>
  <div class="padding-md">
    <div class="hostsFilters row">
        <select ng-model="BU" ng-change="changeTheView()" class="form- control">
            <option value="">BU</option>
            <option value="1">BU1</option>
            <option value="2">BU2</option>
            <option value="3">BU3</option>
            <option value="4">BU4</option>
        </select>
        <span>OR</span>
        <select ng-model="Application" ng-change="changeTheView()" class="form-control">
            <option value="">Application</option>
            <option value="1">App1</option>
            <option value="2">App2</option>
            <option value="3">App3</option>
            <option value="4">App4</option>
        </select>
        <span>OR</span>
        <input type="text" class="form-text" ng-model="hostName.host_name" placeholder="Hostname">
    </div>
</div>
<div class="row">
    <i-data-grid></i-data-grid>
</div>

我的控制器的代码：

'use strict';

angular.module('angularFullstackApp')
  .controller('MainCtrl', function ($scope) {
  $scope.changeTheView=function(){
    console.log('Came inside the Change the view function..');
    //Now invoke the custom directive.
  }
});

我的指令的代码：

'use strict';
angular.module('angularFullstackApp')
  .directive('iDataGrid', function () {
    return {
      templateUrl: 'app/iDataGrid/iDataGrid.html',
      restrict: 'E',
      link: function (scope, element, attrs) {
        $(document).ready(function() {
        $('#example').dataTable();
      } );
    }
  };
});

Answer 1

你可以使用属性，＆amp;传递您想要放置手表的属性内的值，当任何值发生变化时会触发该手表

<强>标记

<i-data-grid watch-values="['BU', 'Application']"></i-data-grid>

<强>代码

'use strict';

angular.module('angularFullstackApp')
  .directive('iDataGrid', function () {
    return {
      templateUrl: 'app/iDataGrid/iDataGrid.html',
      restrict: 'E',
      link: function (scope, element, attrs) {
        $(document).ready(function() {
        $('#example').dataTable();
        scope.$watch(attrs.watchValues,function(newVal, oldVal){
            //newly changed value available here with same sequence
            //as you passed ['BU', 'Application'] here, it fires fn when any of value changed,
            //newVal[0] contains newly changed value of BU
            //& newVal[1] will contain newly changed value of Application
            //call what ever code on basis of this values
        },true);
      });
    }
  };
});

调用自定义指令表单控制器

1 个答案: