Question

我在http://jsfiddle.net/skwidgets/w2X9m/3/有一个小提琴来构建一组复选框。它在原型中的工作方式正常，我甚至可以包含多个组，并且它们可以独立运行。我很满意，我将代码添加到我正在构建的应用程序和模板中的html：'＆lt;＆gt;'该指令没有出现。模板中句柄栏中的模型数据确实如此。我无法找出原因，因为没有错误。

我也有这个用于显示代码工作的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);
    }
}
});

我从连接的小提琴手中取出了原型中的代码，但由于某种原因这种方法无效。

Answer 1

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

在角度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'
}

AngularJS指令模板不显示HTML

1 个答案: