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表单的指令？为什么甚至有自定义指令？

如果您的答案是：＆＃34;我希望此网络表单显示在我的应用中的多个位置，请考虑使用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 个答案:

的JavaScript

HTML