Javascript AngularJS指令模板不显示HTML

我有一个小提琴在建立一组复选框。它的工作原理与原型一样，我甚至可以包含多个组，它们独立运行。当我满意时，我将代码添加到我正在构建的应用程序中，并且指令的模板：中的html不会出现。模板中的控制柄栏中的模型数据将执行任何操作。我无法找出原因，因为没有错误

我还有一个plunker，它显示了代码的工作原理

及

---

我从链接的fiddler中的原型中获取了代码，但由于某些原因，该代码不起作用。

该代码在较新版本的angular中不起作用。在以前的版本中，有一个bug导致隔离作用域不能真正隔离并泄漏到其他指令

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

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

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

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

---

你的问题到底是什么？我有点困惑。我拿走了你的小提琴，让它发挥作用，并纠正了你指令名称中的一个拼写错误，除非你的意思是“suvey”而不是“survey”，请参阅更新的感谢你的纠正和工作小提琴。问题是，当将相同的代码放入我正在构建的应用程序中时，该代码对指令中的template:value的html没有任何作用。该页面显示模式名称bedsideQ1、bedsideQ1和两个空对象[]、[]。不填充任何复选框。我不知道为什么。我现在无法解释为什么，但你原来的小提琴包括AngularJS 1.2，而你的plunker是1.1.5，我将你的plunker源链接复制到小提琴中，以及其他东西。无论如何，我只是再次打开小提琴，将AngularJS源代码更改为最新的1.2.4版本，并再次遇到相同的空括号问题。因此，请尝试确保你的应用程序是1.1.5，如果可以，那就是版本问题。我想看看是否需要注射，或者是否存在弃用的问题

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);
    }
}
});

<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'
}