Question

新的角度似乎被困在最简单的任务上。我有和我需要修改的现有应用程序。我正在尝试向页面添加一个额外的选项卡 - 选项卡显示但我的模板中的内容不显示 - 它也不会触发我在控制器中的consols.log

指令：

'use strict';

angular.module('bdrApp.admin.student-transfer-directive', [])
/* bdr-student-transfer
 */
.directive('bdrStudentTransfer', [function() {
    var controller = [
        function() {
            console.log("Hello, Student Transfer");
        }
    ];

    return {
        scope: {},
        restrict: 'E',
        controller: controller,
        templateUrl: 'res/templates/admin/studentTransfer.html?v1.0'
    };
}]);

模板：

<div  class="studentTransfer" ng-show="!loading">
    <div class="">
        <strong>Coming Soon!</strong>
    </div>


</div>

app.js

  'bdrApp.admin.student-report-directive',

的index.html

    <script src="directives/admin/student-transfer-directive.js"></script>

adminview.html（定义标签的位置）

    <div ng-switch-when="resource" class="admin-resource-view">
            <bdr-admin-resource-view ></bdr-admin-resource-view>
        </div>
        <div ng-switch-when="studentTransfer" class="admin-studentTransfer-view">
            <bdr-student-transfer></bdr-student-transfer>
        </div>

Answer 1

我按照橙色的建议解决了问题，删除了ng-switch-when标记以进行故障排除。这显示了我在所有选项卡上的模板内容并触发了console.log。然后我把标签放回去，不使用camelCase并保持全部小写 - 工作！

如果有人可以评论为什么这是区分大小写会很好的。

谢谢

adminView.html：

 "<div ng-switch-when="studenttransfer" class="admin-studentTransfer-view">"

adminView.js

   // Define tabs
  $scope.tabs = {
    students: {
      text: 'Manage Students',
      active: true,
    },
    teams: {
      text: 'Manage Teams',
    },
    scheduler: {
      text: 'Scheduler',
    },
    reports: {
      text: 'Reports',
      active: true
    },
    resource: {
      text: 'Resources',
      active: true
    }  ,
      studenttransfer: {
          text: 'Student Transfer',
          active: true
      }
  };

指令中的角度控制器没有约束力

1 个答案: