Question

我一直在苦苦挣扎，谷歌四处搜寻，我无法想象为什么这条指令不会更新我的控制器$范围值：指令：

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>

我的目标＆＃34;横向＆＃34;来自我的控制器：

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

我已经尝试了StackOverflow的一些函数，关于使用链接函数来更新我的控制器$ scope中的值并使用相同的输出：从$ scope到指令的值正在运行，但对指令的任何更改都是有效的。输入字段不会更新$ scope对象＆＃34; lateral＆＃34;

Answer 1

请看下面的代码，你非常接近。我想您可能一直在尝试使用ngModel而不是为其指定的作用域属性设置/传递值，这是值。如果我能正确理解，那就是这样。如果这有帮助，请告诉我，如果不是，我可以随时更新。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

通过直接使用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>

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

2 个答案: