AngularJS指令模板不显示HTML

我在http://jsfiddle.net/skwidgets/w2X9m/3/上有一个小提琴来创建一组复选框。它的工作原理和原型一样，我甚至可以包括多个组，并且它们可以独立运行。我满意地将代码添加到正在构建的应用程序中，并且该模板中的html：'<>'没有出现。模板中的句柄栏中的模型数据是如何实现的。我无法搞清楚为什么没有错误。AngularJS指令模板不显示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); 
    } 
} 
});

我把代码从样机在链接的提琴手和不工作一些原因。

来源

2013-12-10 skwidgets

您的问题到底是什么？我有点困惑。我拿着你的小提琴并且使它工作并纠正你的指令名称中的拼写错误，除非你的意思是'调查'而不是'调查'，请参阅更新的[小提琴]（http://jsfiddle.net/w2X9m/8/） – jnthnjns

谢谢你的纠正和工作小提琴。问题是，只有在我构建的应用程序中放入相同的代码时，才会对指令中的template：value的html做任何事情。该页面显示模态名称（bedsideQ1，bedsideQ1）和两个空obects（[]，[]）。没有复选框被填充。我无法弄清楚为什么。 – skwidgets

我不能解释为什么现在，但你原来的小提琴包括AngularJS 1.2而你的运动员是1.1.5，我将你的plunker源链接复制到小提琴，其他东西。无论如何，我只是再次打开小提琴，并将AngularJS源代码更改为最新的1.2.4，并再次获得了相同的空括号问题。因此，请确保您的应用程序是1.1.5，如果这样的话，那么这是一个版本问题。我会查看是否需要注射或者是否存在弃用问题 – jnthnjns

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

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

来源

2013-12-10 08:56:10 dtabuenc

AngularJS指令模板不显示HTML

回答

相关问题