具有ngModel绑定的AngularJS自定义指令不起作用答案

【问题标题】：AngularJS custom directive with ngModel binding not working具有ngModel绑定的AngularJS自定义指令不起作用
【发布时间】：2014-11-27 20:48:21
【问题描述】：

我正在尝试创建一个自定义指令来显示格式化地址。我编写了以下代码来使用新指令，但它不起作用。我的帐户控制器（未显示）工作正常，并且 billingAddress.Line1 显示正确。但是，我的地址指令没有呈现任何内容。

我已将指令代码包含在我的 html 中，但我希望将其移动到单独的 .js 文件中以供重复使用。有人可以解释我做错了什么吗？

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <script type="text/javascript" src="ng-address.js"></script>
  <script type="text/javascript" src="app.js"></script>
  <script type="text/javascript">
    (function() {
      var app = angular.module('ng-directives', []);

      app.directive("ngAddress", function() {
        return {
          restrict: 'E',
          scope: {
            address: '=ngModel'
          },
          template: "<div>{{address.Line1}}</br><span>{{address.Line1}}</br></span>{{address.city}}, {{address.state}} {{address.postCode}}</div>"
        };
      });

    })();
  </script>
</head>

<body class="container" ng-controller="AccountController as account">
  <div>{{account.model.billingAddress.line1}}</div>
  <ng-address ng-model="account.model.billingAddress"></ng-address>
</body>

</html>

【问题讨论】：

标签： javascript angularjs-directive

【解决方案1】：

首先，示例不完整。

我将角度模块更改为myApp
我添加了一个控制器AccountController
在 ng-controller 中使用 as 不起作用。我不确定这是否可行，但我从不使用它。

指令中的主要问题是ng-model 的错误使用。您应该将其传递给require，而不是范围。然后将其传递给link 函数，在那里实现$render 函数。

您可能还想将函数推送到$viewChangeListeners。

更多详情，请参阅documentation。

最后模板包含</br>，这是无效的。

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <script type="text/javascript">
    (function() {
      var app = angular.module('myApp', []);

      app.controller('AccountController', function($scope) {
        $scope.model = {
          billingAddress: {
            line1: 'somewhere far far away',
            city: 'Dark side of the moon',
            state: 'Top secret',
            postCode: '1337XD'
          }
        };
      });

      app.directive("ngAddress", function() {
        return {
          restrict: 'E',
          require: '?ngModel',
          template: "<div>{{address.line1}}<br><span>{{address.line1}}<br></span>{{address.city}}, {{address.state}} {{address.postCode}}</div>",
          link: function(scope, element, attrs, ngModel) {
                ngModel.$render = function() {
              scope.address = ngModel.$modelValue;
            };
          }
        };
      });

    })();
  </script>
</head>

<body class="container" ng-controller="AccountController">
  <input class="form-control" ng-model="model.billingAddress.line1"/>
  <input class="form-control" ng-model="model.billingAddress.city"/>
  <input class="form-control" ng-model="model.billingAddress.state"/>
  <input class="form-control" ng-model="model.billingAddress.postCode"/>
  <ng-address ng-model="model.billingAddress"></ng-address>
</body>

</html>

【讨论】：

你说得对，我的代码不完整。应用程序和控制器在单独的文件 (app.js) 中定义。正如您所指出的，主要问题是我对 ngModel 的使用。此外，我必须按名称获取应用程序，但我没有这样做。进行修改后，我能够让它运行。谢谢。