Angular 1.5.8 输入自定义指令 ng-model答案

【问题标题】：Angular 1.5.8 input custom directive ng-modelAngular 1.5.8 输入自定义指令 ng-model
【发布时间】：2016-11-22 00:05:19
【问题描述】：

我一直在苦苦挣扎，到处在谷歌上搜索，我无法想象为什么这个指令没有更新我的控制器 $scope 值：指令：

app.directive('ingFormField', function () {
    return {
        restrict: "E",
        scope: {
            value: "=",
            fieldName: "@",
            fieldLabel: "@"
        },
        div class="form-group">'+
            '   <label for="{{fieldName}}" class="control-label">{{fieldLabel}}:</label>'+
            '   <input ng-model="value" class="form-control" type="text" name="{{fieldName}}" id="{{fieldName}}" />' +
        '</div>'
    };
});

在 HTML 中使用：

    <ing-form-field field-name="Order" field-label="Order" ng-model="lateral.Order"></ing-form-field>

我的控制器“横向”的对象：

$scope.lateral = {Order: "01", Name: "Person"}

我已经尝试了 StackOverflow 中关于使用链接函数更新控制器中的值的一些函数 $scope 具有相同的输出：从 $scope 到指令的值正在工作，但指令输入字段的任何更改都不起作用更新 $scope 对象“横向”

【问题讨论】：

您能否在放置此指令的位置添加 html 父代码。

标签： javascript angularjs angularjs-directive

【解决方案1】：

这可能是另一种方法，直接使用ngModel 参数并将其传递给您的模板。使用ngModel 将帮助您在模板上保持命名的一致性。

例如，如果您通过 ngModel 指令使用指令模板，则可以从指令范围调用它并使用它将模型反映到您的父控制器。

以下代码实现了此解决方案，请注意，这是解决方案之一，您可能会找到不同的方法。

angular
  .module('myApp', [])
  .directive('ingFormField', function() {
    return {
      restrict: "E",
      scope: {
        ngModel: "=",
        fieldName: "@",
        fieldLabel: "@"
      },
      template: '<div class="form-group">' +
        '   <label for="{{fieldName}}" class="control-label">{{fieldLabel}}:</label>' +
        '   <input ng-model="ngModel" class="form-control" type="text" name="{{fieldName}}" id="{{fieldName}}" />' +
        '</div>'
    };
  })
  .controller('myController', function($scope) {
    $scope.lateral = {
      Order: "01",
      Name: "Person"
    }
  });

angular.element(document).ready(function() {
  angular.bootstrap(document, ['myApp']);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>

<div ng-controller="myController">
  <ing-form-field field-name="Order" field-label="Order" ng-model="lateral.Order">
  </ing-form-field>

  <pre>{{ lateral | json }}</pre>

</div>

【讨论】：

【解决方案2】：

请看下面的代码，你已经很接近了。我认为您可能一直在尝试使用 ngModel 设置/传递值，而不是您为其指定的作用域属性，即 value。如果我理解正确的话。请让我知道这是否有帮助，如果没有，我可以随时更新。

function exampleController($scope) {
  $scope.lateral = {
    Order: "01",
    Name: "Person"
  };
}

function ingFormField() {
  return {
    restrict: "E",
    scope: {
      value: "=",
      fieldName: "@",
      fieldLabel: "@"
    },
    template: '<div class="form-group"> ' +
      '   <label for="{{fieldName}}" class="control-label">{{fieldLabel}}:</label>' +
      '   <input ng-model="value" class="form-control" type="text" name="{{fieldName}}" id="{{fieldName}}" />' +
      '</div>'
  };
}

angular
  .module('example', [])
  .controller('exampleController', exampleController)
  .directive('ingFormField', ingFormField);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div class="container-fluid" ng-app="example">
  <div class="container" ng-controller="exampleController">
    <ing-form-field field-name="Order" field-label="Order" value="lateral.Order"></ing-form-field>

  </div>
</div>

【讨论】：