ng-model 没有暴露在指令之外答案

【问题标题】：ng-model is not being exposed outside of directiveng-model 没有暴露在指令之外
【发布时间】：2016-08-22 00:46:21
【问题描述】：

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

提琴手链接：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);
            });
        }
    };
})

【问题讨论】：

你在哪里定义form对象？
@Ozrix 我应该在哪里定义它？我希望一旦我在任何输入中填写值，它就会自动填充，但它没有。

标签： angularjs

【解决方案1】：

有几个问题。首先，您必须在作用域上定义form 对象。由于您想在 btstAccordion 指令之外查看它（请参阅 <pre> 元素），因此您必须在单独的控制器中定义它：

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

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

<form ng-controller="myCtrl">

这将使<pre>{{ form | json }}</pre> 的行为符合您的预期。

接下来，您将隔离 btstAccordion 指令的范围，这意味着该指令的 outside 范围是不可见的 inside 指令：

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

你可以

删除隔离范围
将scope.form 对象作为参数传递给指令

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

【讨论】：

感谢您的提示。我想使用第二种方法，因为我想为 btstAccordion 提供隔离范围以进行进一步配置。您能否也对第二种方法进行演示？
请注意btstAccordion 现在有scope: { form: "=" } 和在HTML <btst-accordion form="form">，引用$scope.form。这就是您将内容传播到孤立范围的方式。如果你打开你的开发工具，你可以看到当你输入时，指令会在控制台中输出值