Question

我在表格中使用角度手风琴指令。遗憾的是，输入字段值内的模型无法公开或显示在指令之外。不确定哪个部分是错的。

Fiddler链接：Click here HTML

<body ng-app="btst">
     <h3>BootStrap Accordion Directives</h3>
<form>
    <pre>{{ form | json }}</pre> <!-- Not Working -->
    <btst-accordion>
        <btst-pane title="<b>First</b> Pane">
            <pre>{{ form | json }}</pre> <!-- Working -->
            Text: <input type="text" ng-model="form.textInput1"><br>
            Date: <input type="date" ng-model="form.dateInput1">
        </btst-pane>
        <btst-pane title="<b>Second</b> Pane">
            <pre>{{ form | json }}</pre> <!-- Working -->
            Text: <input type="text" ng-model="form.textInput2"><br>
            Number: <input type="date" ng-model="form.numberInput2">
        </btst-pane>
    </btst-accordion>

</form>
</body>

指令

angular.module("btst", []).
directive("btstAccordion", function () {
    return {
        restrict: "E",
        transclude: true,
        replace: true,
        scope: {},
        template:
            "<div class='accordion' ng-transclude></div>",
        link: function (scope, element, attrs) {

            // give this element a unique id
            var id = element.attr("id");
            if (!id) {
                id = "btst-acc" + scope.$id;
                element.attr("id", id);
            }

            // set data-parent on accordion-toggle elements
            var arr = element.find(".accordion-toggle");
            for (var i = 0; i < arr.length; i++) {
                $(arr[i]).attr("data-parent", "#" + id);
                $(arr[i]).attr("href", "#" + id + "collapse" + i);
            }
            arr = element.find(".accordion-body");
            $(arr[0]).addClass("in"); // expand first pane
            for (var i = 0; i < arr.length; i++) {
                $(arr[i]).attr("id", id + "collapse" + i);
            }
        },
        controller: function () {}
    };
}).
directive('btstPane', function () {
    return {
        require: "^btstAccordion",
        restrict: "E",
        transclude: true,
        replace: true,
        scope: {
            title: "@",
            category: "=",
            order: "="
        },
        template:
            "<div class='accordion-group' >" +
            "  <div class='accordion-heading'>" +
            "    <a class='accordion-toggle' data-toggle='collapse'> {{category.name}} - </a>" +

            "  </div>" +
            "<div class='accordion-body collapse'>" +
            "  <div class='accordion-inner' ng-transclude></div>" +
            "  </div>" +
            "</div>",
        link: function (scope, element, attrs) {
            scope.$watch("title", function () {
                // NOTE: this requires jQuery (jQLite won't do html)
                var hdr = element.find(".accordion-toggle");
                hdr.html(scope.title);
            });
        }
    };
})

Answer 1

有几个问题。首先，您必须在范围上定义form对象。由于您希望在btstAccordion指令之外看到它（请参阅<pre>元素），您必须在单独的控制器中定义它：

function myCtrl($scope) {
    $scope.form = {};
}

然后在HTML中使用该控制器：

<form ng-controller="myCtrl">

这会使<pre>{{ form | json }}</pre>的行为与您期望的一样。

接下来，您将btstAccordion指令上的范围隔离开来，这意味着该指令的范围指令内部：

directive("btstAccordion", function () { return { restrict: "E", transclude: true, replace: true, scope: {}, // <= isolated scope

你可以

删除隔离范围

将scope.form对象作为参数传递给指令

第一种方法的演示http://jsfiddle.net/rLksvezd/4/

ng-model未在指令

1 个答案: