Question

我使用Laravel5并为角度无效表单创建自定义指令。现在我无法访问ngmodel放置的数据。我的目标是首先显示人的名字，然后保存他的名字，但名字没有显示在DOM加载... 我发现的主要问题是$ watch，但我不知道该改变什么。

这是我的codepen

AngularJS代码：

(function() {
  'use strict';

  angular.module('app', [])
    .controller('ctrl', mainController)
    .directive('myInput', myInput);

  function mainController() {
    var vm = this;
    vm.data = {
      email: 'test@tesst.com',
      name: 'Nickelson'
    };
  }

  function myInput() {

    function tempFunc(element, attrs) {
      var templateWithVars = '<input type="inputType" ng-model="fieldModelName" name="fieldModelName" ng-required="required"/>';

      var template = templateWithVars
        .replace("inputType", attrs.type)
        .replace("exampleName", attrs.example)
        .replace(/fieldModelName/g, getFieldModelName(attrs));
      return template;
    }

    function getFieldModelName(attrs) {
      var objectAndField = attrs.ngModel;
      var names = objectAndField.split('.');
      var fieldModelName = names.pop();
      return fieldModelName;
    }

    return {
      replace: false,
      scope: {},
      template: tempFunc,
      require: ['^form', "ngModel"],
      link: function (scope, element, attrs, ctrls) {
        scope.form = ctrls[0];
        var ngModel = ctrls[1]; // This part is null

        var model = getFieldModelName(attrs);
        scope.$watch(model, function (newVal, oldVal) {
          ngModel.$setViewValue(scope[model]);
        });
      }
    }
  } 
})();

HTML：

<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="ctrl as vm">
   <br />
   email: {{ vm.data.email }}
  <br />
   name: {{ vm.data.name }} // Nothing showing in here!!!
  <br />
 <h2>Edit</h2>
  <form novalidation name="vm.form">
    <my-input ng-model="vm.data.name"
            type="text"
            example="vm.data.name">  // My Input by default is empty
    </my-input>
    <br />
    <br />
    <input type="submit" ng-show="vm.form.$valid" value="Save Name"/> 
  </form>
</body>
</html>

Answer 1

您以时髦的方式将ng-model分配给您的指令。它使工作，但它初始化的方式实际上用空白输入覆盖原始ng模型。

如果您将$ watch功能更改为：

if (scope[model] !== undefined) ngModel.$setViewValue(scope[model]);

它只会更新ngModel，如果它不是未定义的，它最初是。

Here's an updated codepen

请注意，在定义ngModel之前，您实际上必须对输入进行更改（即使您只是键入空格和退格键，它也可以。）

Answer 2

我解决了我的问题。我不需要放置来自require：[“ngModel”]的ngmodel，但只需将其添加到范围内（范围：{ngModel：'='}），之后我将其添加到tempFunc，如：

var templateWithVars ='input type =“inputType”ng-model =“ngModel”name =“fieldModelName”ng-required =“required”/＆gt;';

它有点解决它......

AngularJS自定义指令，无法在DOM加载

2 个答案: