Angular JS 如何在引导 UI 选项卡中插入自定义指令

Angular JS How to insert custom Directives in the Bootstrap UI Tabs

本文关键字：选项 插入 指令 自定义 UI JS Angular      更新时间：2023-09-26

根据我的问题，我能够成功地将一个指令插入另一个指令。但是现在，当我使用相同的方式将指令放入选项卡中时，如下所示，我无法正确编译指令，它向我显示未知字符，例如：： {"0":{"ng339":6},"length":1}

请注意：1(我使用了Angular UI BootStrap Tabs中的示例

var myapp = angular.module('myapp', ['ngAnimate', 'ui.bootstrap']);
        angular.module('myapp')
      .controller('myCtrl',['$scope','$compile', function ($scope, $compile) {
      $scope.tabs = [
        { title:'Dynamic Title 1', content:'<first-directive></first-directive>' },
        { title:'Dynamic Title 2', content:'Dynamic content 2' }
      ];
      var compileTabs = function() {
        var ele = $compile($scope.tabs[0].content)($scope);
        $scope.tabs[0].content = ele;
      };
      compileTabs();
       
      $scope.model = {
        name: 'Tabs'
      };
    }]);
angular.module('myapp').directive("firstDirective",['$compile', function($compile) {
    return {
        templateUrl : './directives/firstdirective.html',
         scope: {
            },
        controller: function ($scope) {
            
            $scope.firstCtrl = function() 
            {
              console.log('I am in the firstCtrl');
            }
    }}]);
<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <title>AngularJS: UI-Router Quick Start</title>
    <!-- Bootstrap CSS -->
    <link href="lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
</head>
<body class="container">
  
<div ng-controller="myCtrl">
  <uib-tabset>
      <uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
        {{tab.content}}
      </uib-tab>
  </uib-tabset>
</div>
  
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-animate/angular-animate.js"></script>
<script src="lib/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="lib/angular-sanitize/angular-sanitize.js"></script>
<script src="lib/angular-ui-router/release/angular-ui-router.js"></script>
<script src="app.js"></script>
</body>
</html>

我想你只是忘记了服务的定义。

您的代码

.controller('myCtrl',['$compile', function ($scope, $window, $compile) {

$window和$compile将被undefined.

正确的代码

.controller('myCtrl',['$scope', '$window', '$compile', function ($scope, $window, $compile) {
相关文章：