AngularJS中的属性指令

我想创建一个属性指令，它将在输入字段之前插入一个标签。通过警报声明判断，该html看起来是正确的。不过，我没有正确编译或做角元素。任何帮助将不胜感激。AngularJS中的属性指令

这是JS代码。

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

myApp.directive('makeLabel', function ($compile) { 
    return { 
     restrict: 'A', 
     replace: false, 
     link: function (scope, inputFld, attrs) { 
      var ForInput = attrs['name']; 
      var LabelSize = attrs['labelSize']; 
      var LabelText = attrs['makeLabel']; 
      var htmlStart = '<label for="' + ForInput + '" class="label-control ' + LabelSize + '">'; 
      var htmlStar = ''; 
      if (attrs['required']) { 
       htmlStar = '<span style="color:red">*</span>'; 
      } 
      var htmlEnd = LabelText + ":</label> "; 
      var htmlTotal = htmlStart + htmlStar + htmlEnd; 
      alert(htmlTotal); 
      // Now add it before the input 
      var newLabel = angular.element(htmlTotal); 
      inputFld.prepend(($compile(htmlTotal))); 
     } 
    }; 
});

这是HTML

<!DOCTYPE html> 
<html class="no-js" data-ng-app="myApp"> 
<head> 
    <title></title> 
</head> 
<body> 

    <div class="container"> 
     <div class="row"> 
      <form name="TestLabelForm" class="form-horizontal"> 
       <div class="form-group"> 
        <input type="text" name="Simple" required="" make-label="Test Label" label-size="col-md-7" /> 
       </div> 
      </form> 
     </div> 
     <br /> 
     Should look like 
     <br /> 

     <div class="row"> 
      <form name="ExampleForm" class="form-horizontal"> 
       <div class="form-group"> 
        <label for="Simple2" class="col-md-7"><span style="color:red">*</span>Test Label:</label> 
        <input type="text" name="Simple2" required="" /> 
       </div> 
      </form> 
     </div> 
    </div> 

    <!-- Get Javascript --> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> 
    </script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"> </script> 
    <script src="js/TestLabelAttr.js"> </script> 
</body> 
</html>

来源

2014-07-16 RebelATX

它适用于我，你期望什么？ – ThomasP1988

“我不编译或正确执行角度元素”是指？ – harishr

你看到的DOM异常，这被抛出？它无法找到您创建的元素。您必须使用document.createElement()并通过$compile(scope)(newElement)将新创建的元素引入示波器。这里有一个工作小提示：http://jsfiddle.net/2suL9/26/请注意，我没有实现你的例子的if条件，你必须添加它！

JavaScript部分看起来是这样的：

var myApp = angular.module('myApp', []); 
myApp.directive('makeLabel', function ($compile) { 
    return function (scope, inputFld, attrs) { 
     var el = inputFld[0]; 
     var newEl = document.createElement("label"); 
     newEl.setAttribute("for", attrs['name']); 
     newEl.setAttribute("class", "label-control"); 
     var subEl = document.createElement("span"); 
     subEl.setAttribute("style", "color:red"); 
     subEl.innerHTML = "*"; 
     var endText = document.createTextNode("Test Label:"); 

     $compile(scope)(newEl); 
     $compile(scope)(subEl); 
     $compile(scope)(endText); 
     newEl.appendChild(subEl); 
     newEl.appendChild(endText); 
     inputFld.parent().prepend(newEl); 
    } 
});

注：更改指令外的DOM元素是不是一个好的做法。而是使用另一个标签指令，该标签应显示在输入前面。您可以集中您的控制器中的逻辑，并使用广播通知指令，何时应该更改。

来源

2014-07-16 16:19:10 meberhard

它应该是'$ compile（element）（scope）'。 – runTarm

AngularJS中的属性指令

回答

相关问题