AngularJS指令模板不显示HTML答案

【问题标题】：AngularJS Directive template not displaying HTMLAngularJS指令模板不显示HTML
【发布时间】：2013-12-10 16:56:10
【问题描述】：

我在http://jsfiddle.net/skwidgets/w2X9m/3/ 有一个小提琴来构建一组复选框。它可以在原型中按预期工作，我什至可以包括一个以上的组，它们独立运行。由于我很满意，我将代码添加到我正在构建的应用程序中，并且模板中的 html：指令的“”没有出现。模板中手柄栏中的模型数据如何。我无法找出原因，因为没有错误。

我也有这个显示代码工作的 plunker http://plnkr.co/edit/JE5dRDU4VyGd0UAbCtNu?p=preview

<div class="sqs" >
        <pre>
            {{survey | json}}
        </pre>

        <suvey-checkbox ng-model="Q1" ng-init="surveyQuestions = [
                { 'value':'value1', 'name': 'The unit' }, 
                { 'value': 'value2', 'name': 'Patient Threw Up'}, 
                { 'value':'value3', 'name': 'Unsafe for children' }, 
                { 'value':'value4', 'name': 'Actively dying, reached life goal'}]">
        </suvey-checkbox>

        <suvey-checkbox ng-model="Q2" ng-init="surveyQuestions = [
                { 'value':'value1', 'name': 'The unit' }, 
                { 'value': 'value2', 'name': 'Patient Threw Up'}, 
                { 'value':'value3', 'name': 'Unsafe for children' }, 
                { 'value':'value4', 'name': 'Actively dying, reached life goal'}]">
        </suvey-checkbox>
</div>

和

var app = angular.module("app", []);
app.run(function($rootScope){
$rootScope.survey = [];
});

app.directive('suveyCheckbox', function ($rootScope) {
return {
    restrict: 'E',
    require: '^ngModel',
    scope: {
        ngModel: '@'
    },
    template: '{{ngModel}}<br /><label ng-repeat="surveyQuestion in      surveyQuestions" class="checkbox">' +
                '<input data-role="none" type="checkbox" name="selectedExclusion[]" value="{{surveyQuestion.value}}"' + 
                'ng-checked="surveyAnswers.indexOf(surveyQuestion.value) > -1" ng-click="togglesurveyAnswers(surveyQuestion.value)"> ' +
                '{{surveyQuestion.name}} <br /></label>{{surveyAnswers}}',
    link: function (scope, elem, attr) {
        // selected exclusion
        scope.surveyAnswers = [];

        // toggle surveyAnswers for a given answer by name
        scope.togglesurveyAnswers = function togglesurveyAnswers(surveyQuestion) {
            var idx = scope.surveyAnswers.indexOf(surveyQuestion);

            // is currently selected
            if (idx > -1) {
                scope.surveyAnswers.splice(idx, 1);
            }
            // is newly selected
                else {
                scope.surveyAnswers.push(surveyQuestion);
            }
        };
        $rootScope.survey.push(scope.surveyAnswers);
    }
}
});

我从 fiddler 中的原型中获取了代码，该代码由于某种原因无法正常工作。

【问题讨论】：

您的问题到底是什么？我有点困惑。我拿走了你的小提琴并让它工作并更正了你指令名称中的拼写错误，除非你的意思是“suvey”而不是“survey”，请参阅更新的fiddle
感谢您的更正和工作小提琴。问题是，当将相同的代码放入我正在构建的应用程序时，它不会对指令中的模板：值的 html 执行任何操作。该页面显示模态名称（bedsideQ1、bedsideQ1）和两个空对象（ [],[] ）。未填充任何复选框。我不知道为什么。
我现在无法解释为什么，但是您的原始小提琴包含 AngularJS 1.2 而您的 plunker 是 1.1.5，我将您的 plunker 源链接复制到小提琴中，等等。无论如何，我只是再次打开小提琴并将 AngularJS 源更改为最新的 1.2.4 并再次遇到相同的空括号问题。因此，请尝试确保您的应用程序是 1.1.5，如果可以，则说明是版本问题。我会看看是否需要注射或是否弃用是问题

标签： javascript angularjs directive

【解决方案1】：

该代码不适用于较新版本的 Angular。在以前的版本中，有一个错误导致隔离范围没有真正隔离并泄漏到其他指令。

在 Angular 1.2.x 中，隔离范围是真正的隔离。这意味着您不能在模板中使用任何内容，除非指令手动将其放入范围或包含在隔离范围定义中（例如scope: { myVar: '='}）

例如，在您的情况下，您的模板无法访问 surveyQuestions，因为它未在私有范围中定义（ng-init 将无法访问您的 surveyCheckbox 指令内的隔离范围。

如果您希望能够在指令模板中使用surveyQuestions，您需要将其传递到隔离范围：

<survey-checkbox questions="surveyQuestions" ng-model="bedsideQ2" ng-init="surveyQuestions = [
                { 'value':'value1', 'name': 'The unit' }, 
                { 'value': 'value2', 'name': 'Patient Threw Up'}, 
                { 'value':'value3', 'name': 'Unsafe for children' }, 
                { 'value':'value4', 'name': 'Actively dying, reached life goal'}]">
</survey-checkbox>

然后将其添加到您的隔离范围：

scope: {
   ngModel: '@',
   surveyQuestions: '=questions'
}

【讨论】：