如何從自定義指令中檢索值並將其傳遞給控制器

Question

我的主要html文件結構如下：

<html ng-app='information'>
<body ng-controller="FirstController as first>
<div ng-controller="SecondController as second>

以下是自定義指令。

<!-- Custom Directive -->

<div id="information">

    <myOwnDirective ng-controller="ThirdController as thirdCtrl"></myOwnDirective>

  </div>

指令創建如下：

(function() {

    var app = angular.module('information', ['ui.bootstrap']);

    app.directive('myOwnDirective', function(){
    return {
        restrict: 'E',
        templateUrl: 'my-own-directive.html',

        };  
    });

這是我的自定義指令模板：

<uib-accordion tag ng-repeat="info in first">

<form ng-submit="thirdCtrl.updateInformation()">

<div class="form-group">

<label for="someprop">Property</label> <input type="text" name="someprop"
            class="form-control" ng-model="info.propValue"
            ng-readonly="info.propValue">
 </div>

 <button type="submit" class="btn btn-success btn-lg btn-block">Click</button>
</form>

這是我的控制器，這里有要在自定義指令模板中的ng-click上調用的函數。

(function() {
    angular.module('deviceInfo2').controller('FormController', [ '$scope','$http', function($scope) {               


        this.updateStatus =function () {

            console.log("Inside function");
        };
    }]);        
})();

我想在ng-click上的自定義指令模板中獲取數據，並將其傳遞給表單控制器，但是我似乎無法找到在其中獲取數據的方法。 我嘗試探索創建服務，但無法正常工作。 我想我錯過了范圍。 誰能指出我正確的方向。 我已經堅持了一段時間，需要取得一些進展。 謝謝。

Answer 1

如果您發現自己創建了一個可生成整個Web表單的指令，則應質疑您的方法。 想小一點。 太多的指令不是很可重用，並且您經常會遇到這種情況。

除了創建可生成整個Web表單的指令之外，為什么不僅將Web表單創建為視圖模板？ 為什么還要有自定義指令？

如果您的答案是：“我希望此Web表單出現在我的應用程序中的多個位置”，請考慮使用ng-include或ui-router創建可重用狀態。 指令是自定義HTML元素（或屬性），而不是用於處理大量代碼的橡皮圖章。

如果仍然需要自定義指令將數據提供給父指令，那么一種好方法是使用&數據綁定。

工作示例： JSFiddle

的JavaScript

angular.module('myApp', [])
  .controller('MyController', MyController)
  .controller('MySelectController', MySelectController)
  .directive('mySelect', mySelectDirective)
;

function MyController() {
  var vm = this;
  vm.setValue = function(value) {
    vm.value = value;
  };
}

function MySelectController() {
  var vm = this;
  vm.items = [
    {label: 'One', value: 1},
    {label: 'Two', value: 2},
    {label: 'Three', value: 3}
  ];
}

function mySelectDirective() {
  return {
    bindToController: {
      callback: '&'
    },
    controller: 'MySelectController',
    controllerAs: 'vm',
    link: postLink,
    scope: true,
    template: '<select ng-model="vm.selected" ng-options="item.value as item.label for item in vm.items"></select>'
  };

  function postLink(scope, iElement, iAttrs, vm) {
    scope.$watch(function() {
      return vm.selected;
    }, function(newValue) {
      if (angular.isDefined(newValue) && typeof vm.callback === 'function') {
        vm.callback({$value: newValue});
      }
    });
  }
}

的HTML

<div ng-controller="MyController as vm">
  <my-select callback="vm.setValue($value)"></my-select>
  <p>Selected Value: {{vm.value}}</p>
</div>

Answer 2

如果您的控制器范圍中有一個范圍變量，請說

$scope.var1 = '';

確保控制器的局部位於使用自定義指令的位置。 然后，在指令的控制器中，可以在下面使用此命令將值推入控制器的作用域：

$scope.$parent.var1 = 'value to pass';

這里的假設是您的指令具有隔離范圍。 控制器的作用域是指令作用域的父級，因此可以使用$parent關鍵字傳遞數據。

如何從自定義指令中檢索值並將其傳遞給控制器

問題描述

2 個解決方案

解決方案1
2 已采納 2016-02-15 02:30:02

的JavaScript

的HTML

解決方案2
0 2016-02-14 23:17:15

如何從自定義指令中檢索值並將其傳遞給控制器

問題描述

2 個解決方案

解決方案1 2 已采納 2016-02-15 02:30:02

的JavaScript

的HTML

解決方案2 0 2016-02-14 23:17:15

解決方案1
2 已采納 2016-02-15 02:30:02

解決方案2
0 2016-02-14 23:17:15