Question

我正在尝试创建一个属性指令，该指令将在输入字段之前插入标签。从alert语句判断，html看起来是正确的。但是我没有正确编译或做角度元素。非常感谢任何帮助。

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

Answer 1

您是否看到了抛出的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元素不是一个好习惯。而是为标签使用另一个指令，该指令应显示在输入的前面。您可以将控制器中的逻辑集中在一起，并使用广播来告知指令何时应该更改。

AngularJS中的属性指令

1 个答案: