Forms AngularJs指令：使用TemplateURL。更换滤芯。添加表单输入。正在获取form.input.$error对象

我不确定这是否可行，但我正在努力，并且一直在努力

我想要一个“E”（element）指令，该指令使用指令的“templateUrl”功能替换为更复杂的嵌套HTML节点

定义指令的HTML（包含完整mental image的表单标记）：

“替换”上述指令“ds frm输入容器”HTML元素的TemplateUrl内容：

<div>

  <input
    required
    ng-minlength=0
    ng-maxlength=50
    class="form-control"
    ng-model="dsModel" 
    placeholder="{{dsPlaceHolder}}" />  

  <span ng-if="showErrs" class="label label-danger">FFFFF: {{dsModel}}</span>

</div>

FFFFF:{{dsModel}}

控制器和指令：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = "Nacho";
  $scope.user = {};
  $scope.user.firstName = ""; 


})
.directive('dsFrmInputContainer', function(){

    var ddo = { 
      priority: 0,
      restrict: 'AE',
      scope: 
      {
        frmName: '@',
        inputName: '@',
        dsPlaceHolder: '@',
        dsModel: '=',
        frmObj: '='
      },
      templateUrl: 'template1.html',
      replace: true,
      controller: function($scope)
      {
        $scope.showErrs = true;

      },
      compile: function compile(ele, attr) {
        return {
          pre: function preLink(scope, ele, attr, controller) 
          { 

          },
          post: function postLink(scope, ele, attr, controller) 
          { 
            var txt = ele.find('input');

            txt.attr('id', scope.inputName);
            txt.attr('name', scope.inputName);

            //BLUR
            txt.bind('blur', function () {

              console.log("BLUR BLUR BLUR");

              angular.forEach(scope.frmObj.$error, function(value, key){
                  var type = scope.frmObj.$error[key];

                  for(var x=0; x < type.length; x++){
                    console.log(type[x]);
                  }
              });        

              event.stopPropagation();
              event.preventDefault();

            });              
          }
        };
      },

    };  

    return ddo;

});

var-app=angular.module（'plunker'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.name=“Nacho”；
$scope.user={}；
$scope.user.firstName=“”；
})
.directive（'dsFrmInputContainer'，function（）{
var ddo={
优先级：0，
限制：“AE”，
范围：
{
frmName:“@”，
inputName:“@”，
dsPlaceHolder:“@”，
dsModel:“=”，
frmObj:“=”
},
templateUrl:'template1.html'，
替换：正确，
控制器：功能（$scope）
{
$scope.rs=true；
},
编译：函数编译（ele，attr）{
返回{
前置：功能预链接（范围、要素、属性、控制器）
{ 
},
post：功能postLink（范围、元素、属性、控制器）
{ 
var txt=ele.find（'input'）；
txt.attr（'id'，scope.inputName）；
txt.attr（'name'，scope.inputName）；
//模糊
bind（'blur'，函数（）{
控制台日志（“模糊”）；
角度.forEach（scope.frmObj.$error，函数（值，键）{
var type=scope.frmObj.$error[key]；
对于（变量x=0；x

该指令替换just fine，输入元素命名为just fine。但是，表单对象在错误信息中不包含输入元素名称。这使得我不可能在指令中设置的“模糊”事件中挑出输入元素

我这样做是为了减少html中错误消息（跨度）的显示/隐藏逻辑“噪音”，它应该是可重用的

---

更新（2014.01.28）：

---

2014.01.28： 补充承诺。有一项服务允许在单击按钮时进行验证。不再使用内置角度验证发现与其他库（或viceversa）存在一些兼容性问题

原件： 这是我完成的表单验证指令愿景（下面的plnkr链接）。在stack overflow社区的帮助下协同完成。它可能不完美，但也不完美，但它们味道很好

---

因此，这里有一个链接，它在给定的输入表单错误对象上按预期设置了名称变量

---

唯一的区别是inputName是从attrs对象读取的，并且不是作用域的一部分。然后在编译阶段返回link函数之前读取该值，以正确设置模板DOM。

因此，这里有一个链接，该链接在给定的输入表单错误对象上按预期设置了名称变量

---

唯一的区别是inputName是从attrs对象读取的，并且不是作用域的一部分。然后在编译阶段返回link函数之前读取该值，以正确设置模板DOM。

我刚刚花了很长时间试图解决这个问题，虽然这并不是您想要的，但这是我的尝试。它使用bootstrap进行所有的样式设置，并允许进行必要的和模糊的验证，但它肯定还没有完成。非常感谢您的任何想法或建议

---

我刚刚花了很长时间试图解决这个问题，虽然这并不是你想要的，但他是我的尝试。它使用bootstrap进行所有的样式设置，并允许进行必要的和模糊的验证，但它肯定还没有完成。非常感谢您的任何想法或建议

---

几个主要问题…隔离范围，在不使用$compile的情况下更改链接中的元素。阅读与隔离范围相关的

ng型号

docs部分。应该能够在没有隔离的情况下完成所有这些scope@charlietfl我理解孤立的范围，我已经尝试了另一种选择。我不确定我们是否可以说隔离作用域是一个问题。这可能被认为是不正确的用法，但我不确定这是否是一个问题$然而，编译可能是个问题，但我目前的理解会让我相信我是通过编译前（这里尝试了1次）和编译后使用$compile；我已经读过，post相当于link。如果我没有正确理解，请告诉我。我将尝试调整范围并尝试学习如何使用$compile。谢谢。您阅读了

ng model

文档吗？这一个@charlietfl:@charlietfl fyi:updated了几个主要问题…隔离范围，在链接中更改元素而不使用$compile。阅读与隔离范围相关的

ng型号

docs部分。应该能够在没有隔离的情况下完成所有这些scope@charlietfl我理解孤立的范围，我已经尝试了另一种选择。我不确定我们是否可以说隔离作用域是一个问题。这可能被认为是不正确的用法，但我不确定这是否是一个问题$然而，编译可能是个问题，但我目前的理解会让我相信我是通过编译前（这里尝试了1次）和编译后使用$compile；我已经读过，post相当于link。如果我没有正确理解，请告诉我。我将尝试调整范围并尝试学习如何使用$compile。谢谢。你读过ng型号的文件了吗？这个@charlietfl:@charlietfl-fyi:upd

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = "Nacho";
  $scope.user = {};
  $scope.user.firstName = ""; 


})
.directive('dsFrmInputContainer', function(){

    var ddo = { 
      priority: 0,
      restrict: 'AE',
      scope: 
      {
        frmName: '@',
        inputName: '@',
        dsPlaceHolder: '@',
        dsModel: '=',
        frmObj: '='
      },
      templateUrl: 'template1.html',
      replace: true,
      controller: function($scope)
      {
        $scope.showErrs = true;

      },
      compile: function compile(ele, attr) {
        return {
          pre: function preLink(scope, ele, attr, controller) 
          { 

          },
          post: function postLink(scope, ele, attr, controller) 
          { 
            var txt = ele.find('input');

            txt.attr('id', scope.inputName);
            txt.attr('name', scope.inputName);

            //BLUR
            txt.bind('blur', function () {

              console.log("BLUR BLUR BLUR");

              angular.forEach(scope.frmObj.$error, function(value, key){
                  var type = scope.frmObj.$error[key];

                  for(var x=0; x < type.length; x++){
                    console.log(type[x]);
                  }
              });        

              event.stopPropagation();
              event.preventDefault();

            });              
          }
        };
      },

    };  

    return ddo;

});