AngularJS指令模板不显示HTML

AngularJS Directive template not displaying HTML

本文关键字：显示 HTML 指令 AngularJS      更新时间：2024-06-01

我在http://jsfiddle.net/skwidgets/w2X9m/3/构建一组复选框。它在原型中的工作正如所期望的那样，我甚至可以包括多个组，并且它们独立运行。当我感到满意时，我将代码添加到我正在构建的应用程序中，并在模板中添加html：'<>'的未出现。模板中控制条中的模型数据的作用如何。我不知道为什么，因为没有错误。

我还有一个显示代码工作的plunkerhttp://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中的原型中获取了链接的代码，但由于某种原因，该代码不起作用。

该代码在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'
}
相关文章：