属性指令

Attribute directive in AngularJS

本文关键字：指令 属性      更新时间：2023-09-26

我试图创建一个属性指令，将在输入字段之前插入一个标签。从警告语句判断，html看起来是正确的。然而，我没有编译或做角元素正确。如有任何帮助，我将不胜感激。

小提琴是http://jsfiddle.net/2suL9/

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

看到被抛出的DOM Exception了吗?它找不到您创建的元素。您必须使用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元素不是一个好的做法。应该为标签使用另一个指令，它应该显示在输入的前面。你可以在你的控制器中集中逻辑，并使用广播来通知指令，当他们应该改变。

相关文章：