コントローラからの値とhtmlファイルのビュー

Question

コントローラから値を渡して、anglejsを使用してhtmlファイルに表示しようとしていますが、それを達成できません。私はmetronic angularjsテーマを使用しており、ダッシュボード上でイージーチャートを実装しており、コントローラを使用してその値を渡したいと考えています。

これはapp.jsファイルです。これは私が値を渡したいそれを通して私のDashboardControllerある

var MetronicApp = angular.module("MetronicApp", [ 
    "ui.router", 
    "ui.bootstrap", 
    "oc.lazyLoad", 
    "ngSanitize", 
    'ngCookies' 
]); 

MetronicApp.config(function($interpolateProvider) { 
    $interpolateProvider.startSymbol('{$'); 
    $interpolateProvider.endSymbol('$}'); 
}); 

MetronicApp.config(function($httpProvider) { 
    $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; 
}); 

/* Configure ocLazyLoader(refer: https://github.com/ocombe/ocLazyLoad) */ 
MetronicApp.config(['$ocLazyLoadProvider', function($ocLazyLoadProvider) { 
    $ocLazyLoadProvider.config({ 
     cssFilesInsertBefore: 'ng_load_plugins_before' // load the above css files before a LINK element with this ID. Dynamic CSS files must be loaded between core and theme css files 
    }); 
}]); 

/******************************************** 
BEGIN: BREAKING CHANGE in AngularJS v1.3.x: 
*********************************************/ 
/** 
`$controller` will no longer look for controllers on `window`. 
The old behavior of looking on `window` for controllers was originally intended 
for use in examples, demos, and toy apps. We found that allowing global controller 
functions encouraged poor practices, so we resolved to disable this behavior by 
default. 

To migrate, register your controllers with modules rather than exposing them 
as globals: 

Before: 

```javascript 
function MyController() { 
    // ... 
} 
``` 

After: 

```javascript 
angular.module('myApp', []).controller('MyController', [function() { 
    // ... 
}]); 

Although it's not recommended, you can re-enable the old behavior like this: 

```javascript 
angular.module('myModule').config(['$controllerProvider', function($controllerProvider) { 
    // this option might be handy for migrating old apps, but please don't use it 
    // in new ones! 
    $controllerProvider.allowGlobals(); 
}]); 
**/ 

MetronicApp.factory('authInterceptor', ['$q', '$window', '$injector', function($q, $window, $injector) { 
    return { 
     request: function(config) { 
      config.headers = config.headers || {}; 
      if ($window.localStorage.token) { 
       config.headers.Authorization = 'Bearer ' + $window.localStorage.token; 
      } 
      return config; 
     }, 
     response: function(response) { 
      if (response.status === 401) { 
       // handle the case where the user is not authenticated 
      } 
      return response || $q.when(response); 
     }, 
     responseError: function(rejection) { 
      if (rejection.status == 401) { 
       var $state = $injector.get("$state"); 
       $state.go('login') 
        // location.reload(); 
      } 
      return $q.reject(rejection); 
     } 
    }; 
}]); 

MetronicApp.config(['$httpProvider', function($httpProvider) { 
    $httpProvider.interceptors.push('authInterceptor'); 
}]); 


//AngularJS v1.3.x workaround for old style controller declarition in HTML 
MetronicApp.config(['$controllerProvider', function($controllerProvider) { 
    // this option might be handy for migrating old apps, but please don't use it 
    // in new ones! 
    $controllerProvider.allowGlobals(); 
}]); 

/******************************************** 
END: BREAKING CHANGE in AngularJS v1.3.x: 
*********************************************/ 

/* Setup App Main Controller */ 
MetronicApp.controller('AppController', ['$scope', '$rootScope', function($scope, $rootScope) { 
    $scope.$on('$viewContentLoaded', function() { 
     Metronic.initComponents(); // init core components 
     //Layout.init(); // Init entire layout(header, footer, sidebar, etc) on page load if the partials included in server side instead of loading with ng-include directive 
    }); 
}]); 

/*** 
Layout Partials. 
By default the partials are loaded through AngularJS ng-include directive. In case they loaded in server side(e.g: PHP include function) then below partial 
initialization can be disabled and Layout.init() should be called on page load complete as explained above. 
***/ 

/* Setup Layout Part - Header */ 
MetronicApp.controller('HeaderController', ['$scope', function($scope) { 
    $scope.$on('$includeContentLoaded', function() { 
     Layout.initHeader(); // init header 
    }); 
}]); 

/* Setup Layout Part - Sidebar */ 
MetronicApp.controller('SidebarController', ['$scope', function($scope) { 
    $scope.$on('$includeContentLoaded', function() { 
     Layout.initSidebar(); // init sidebar 
    }); 
}]); 

/* Setup Layout Part - Sideba 
r */ 
MetronicApp.controller('PageHeadController', ['$scope', function($scope) { 
    $scope.$on('$includeContentLoaded', function() { 
     Demo.init(); // init theme panel 
    }); 
}]); 

/* Setup Layout Part - Footer */ 
MetronicApp.controller('FooterController', ['$scope', function($scope) { 
    $scope.$on('$includeContentLoaded', function() { 
     Layout.initFooter(); // init footer 
    }); 
}]); 

/* Setup Rounting For All Pages */ 
MetronicApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { 

    // Redirect any unmatched url 
    $urlRouterProvider 
     .otherwise(function($injector, $location) { 
      // This function prevents the infinite loop on otherwise while session wasn't found 
      var $state = $injector.get("$state"); 
      $state.go("home"); 
     }); 

    $stateProvider 

     .state('app', { 
      url: "/app/", 
      templateUrl: "static/html/tpl/app.html" 
     }) 
     // Dashboard 
     .state('app.dashboard', { 
      url: "dashboard", 
      templateUrl: "static/html/views/dashboard.html", 
      data: { 
       pageTitle: 'Dashboard' 
       // pageSubTitle: 'statistics & reports' 
      }, 
      requireLogin: true, 
      controller: "DashboardController", 
      resolve: { 
       deps: ['$ocLazyLoad', function($ocLazyLoad) { 
        return $ocLazyLoad.load({ 
         name: 'MetronicApp', 
         insertBefore: '#ng_load_plugins_before', // load the above css files before '#ng_load_plugins_before' 
         files: [ 
          'static/assets/global/plugins/morris/morris.css', 
          'static/assets/admin/pages/css/tasks.css', 
          'static/assets/global/plugins/morris/morris.min.js', 
          'static/assets/global/plugins/morris/raphael-min.js', 
          'static/assets/global/plugins/angularjs/angular.min.js', 
          'static/assets/global/plugins/jquery-easypiechart/jquery.easypiechart.min.js', 
          'static/assets/global/plugins/jquery.sparkline.min.js', 
          'static/assets/admin/pages/scripts/index3.js', 
          'static/assets/admin/pages/scripts/tasks.js', 
          'static/js/controllers/DashboardController.js' 
         ] 
        }); 
       }] 
      } 
     }) 

     .state('home', { 
     url: "/login", 
     templateUrl: "static/html/views/login.html", 
     controller: "LoginController", 
     resolve: { 
      deps: ['$ocLazyLoad', function($ocLazyLoad) { 
       return $ocLazyLoad.load([{ 
        name: 'MetronicApp', 
        insertBefore: '#ng_load_plugins_before', 
        files: [ 
         'static/assets/admin/pages/css/login-soft.css', 
         'static/assets/global/plugins/bootstrap/css/bootstrap.min.css', 
         'static/assets/global/plugins/jquery.min.js', 
         'static/assets/global/plugins/bootstrap/js/bootstrap.min.js', 
         'static/assets/global/plugins/backstretch/jquery.backstretch.min.js', 
         'static/assets/admin/pages/scripts/login-soft.js', 
         'static/js/controllers/AccessController.js', 
         'static/js/services/AccessService.js', 
         'static/js/services/CommonService.js' 
        ] 
       }]); 
      }] 
     } 
    }) 

    // .state('home', { 
    // url: "/home", 
    // // controller:"HomeController" 
    // templateUrl: "views/home.html", 
    // resolve: { 
    //  deps: ['$ocLazyLoad', function($ocLazyLoad) { 
    //   return $ocLazyLoad.load([{ 
    //    name: 'MetronicApp', 
    //    files: [ 
    //     'js/controllers/HomeController.js' 
    //    ] 
    //   }]); 
    //  }] 
    // } 
    // }) 

    // .state('login', { 
    // url: "/login", 
    // templateUrl: "views/login.html", 
    // controller: "LoginController", 
    // resolve: { 
    //  deps: ['$ocLazyLoad', function($ocLazyLoad) { 
    //   return $ocLazyLoad.load([{ 
    //    name: 'MetronicApp', 
    //    insertBefore: '#ng_load_plugins_before', 
    //    files: [ 
    //     '../assets/admin/pages/css/login-soft.css', 
    //     '../assets/global/plugins/bootstrap/css/bootstrap.min.css', 
    //     '../assets/global/plugins/jquery.min.js', 
    //     '../assets/global/plugins/bootstrap/js/bootstrap.min.js', 
    //     '../assets/global/plugins/backstretch/jquery.backstretch.min.js', 
    //     '../assets/admin/pages/scripts/login-soft.js', 
    //     'js/controllers/AccessController.js', 
    //     'js/services/AccessService.js', 
    //     'js/services/CommonService.js' 
    //    ] 
    //   }]); 
    //  }] 
    // } 
    // }) 

    .state('signup', { 
     url: "/signup", 
     templateUrl: "static/html/views/signup.html", 
     controller: "SignupController", 
     resolve: { 
      deps: ['$ocLazyLoad', function($ocLazyLoad) { 
       return $ocLazyLoad.load([{ 
        name: 'MetronicApp', 
        insertBefore: '#ng_load_plugins_before', 
        files: [ 
         'static/assets/admin/pages/css/login-soft.css', 
         'static/assets/global/plugins/bootstrap/css/bootstrap.min.css', 
         'static/assets/global/plugins/jquery.min.js', 
         'static/assets/global/plugins/bootstrap/js/bootstrap.min.js', 
         'static/assets/global/plugins/backstretch/jquery.backstretch.min.js', 
         'static/assets/admin/pages/scripts/login-soft.js', 
         'static/js/controllers/AccessController.js', 
         'static/js/services/AccessService.js', 
         'static/js/services/CommonService.js' 
        ] 
       }]); 
      }] 
     } 
    }) 

    .state('forget-password', { 
      url: "/forget-password", 
      templateUrl: "static/html/views/forget-password.html", 
      controller: "ForgetPasswordController", 
      resolve: { 
       deps: ['$ocLazyLoad', function($ocLazyLoad) { 
        return $ocLazyLoad.load([{ 
         name: 'MetronicApp', 
         insertBefore: '#ng_load_plugins_before', 
         files: [ 
          'static/assets/admin/pages/css/login-soft.css', 
          'static/assets/global/plugins/bootstrap/css/bootstrap.min.css', 
          'static/assets/global/plugins/jquery.min.js', 
          'static/assets/global/plugins/bootstrap/js/bootstrap.min.js', 
          'static/assets/global/plugins/backstretch/jquery.backstretch.min.js', 
          'static/assets/admin/pages/scripts/login-soft.js', 
          'static/js/controllers/AccessController.js', 
          'static/js/services/AccessService.js', 
          'static/js/services/CommonService.js' 
         ] 
        }]); 
       }] 
      } 
     }) 
     // AngularJS plugins 
     .state('fileupload', { 
      url: "/file_upload.html", 
      templateUrl: "static/html/views/file_upload.html", 
      data: { 
       pageTitle: 'AngularJS File Upload', 
       pageSubTitle: 'angularjs file upload' 
      }, 
      controller: "GeneralPageController", 
      resolve: { 
       deps: ['$ocLazyLoad', function($ocLazyLoad) { 
        return $ocLazyLoad.load([{ 
         name: 'angularFileUpload', 
         files: [ 
          'static/assets/global/plugins/angularjs/plugins/angular-file-upload/angular-file-upload.min.js', 
         ] 
        }, { 
         name: 'MetronicApp', 
         files: [ 
          'static/js/controllers/GeneralPageController.js' 
         ] 
        }]); 
       }] 
      } 
     }) 

    // UI Select 
    .state('uiselect', { 
     url: "/ui_select.html", 
     templateUrl: "static/html/views/ui_select.html", 
     data: { 
      pageTitle: 'AngularJS Ui Select', 
      pageSubTitle: 'select2 written in angularjs' 
     }, 
     controller: "UISelectController", 
     resolve: { 
      deps: ['$ocLazyLoad', function($ocLazyLoad) { 
       return $ocLazyLoad.load([{ 
        name: 'ui.select', 
        insertBefore: '#ng_load_plugins_before', // load the above css files before '#ng_load_plugins_before' 
        files: [ 
         'static/assets/global/plugins/angularjs/plugins/ui-select/select.min.css', 
         'static/assets/global/plugins/angularjs/plugins/ui-select/select.min.js' 
        ] 
       }, { 
        name: 'MetronicApp', 
        files: [ 
         'static/js/controllers/UISelectController.js' 
        ] 
       }]); 
      }] 
     } 
    }) 

}]); 

/* Init global settings and run the app */ 
MetronicApp 
    .service('AuthenticateService', ['$http', '$cookieStore', '$window', function($http, $cookieStore, $window) { 
     this.isLoggedIn = function() { 
      if (!$cookieStore.get('JU_user_logged') || $cookieStore.get('JU_user_logged') == false || !$window.localStorage.token) { 
       return false; 
      } else { 
       return true; 
      }; 
     }; 
    }]) 
    .run(['$rootScope', '$state', '$stateParams', 'AuthenticateService', '$window', 
     function($rootScope, $state, $stateParams, AuthenticateService, $window) { 
      $rootScope.$state = $state; 
      $rootScope.$on('$stateChangeStart', function(event, toState) { 
       if (toState.name != 'login' && !AuthenticateService.isLoggedIn() && toState.requireLogin) { 
        $state.go('login'); 
        event.preventDefault(); 
        return; 
       } 
      }); 
     } 
    ]) 

： - これはdashboard.htmlある

'use strict'; 

MetronicApp.controller('DashboardController', function($rootScope, $scope, $http, $timeout) { 
    $scope.$on('$viewContentLoaded', function() { 
     // initialize core components 
     Metronic.initAjax(); 
    }); 
    $scope.steps = 1000; 

}); 

ファイル： -

<ul class="page-breadcrumb breadcrumb hide"> 
    <li> 
     <a href="#">Home</a><i class="fa fa-circle"></i> 
    </li> 
    <li class="active"> 
     Dashboard 
    </li> 
</ul> 

<div ng-controller="DashboardController" class="margin-top-10"> 
    <h1>**{{ steps }}** </h1> 
    <div class="row "> 
       <div class="col-md-12 col-sm-12"> 
        <div class="portlet light "> 
          <div class="portlet-title"> 
           <div class="caption"> 
            <i class="icon-cursor font-purple-intense hide"></i> 
            <span class="caption-subject font-purple-intense bold uppercase">Tracker Report</span> 
           </div> 
           <div class="actions"> 
            <a href="javascript:;" class="btn btn-sm btn-circle btn-default easy-pie-chart-reload"> 
            <i class="fa fa-repeat"></i> Reload </a> 
           </div> 
          </div> 
          <div class="portlet-body"> 
           <div class="row"> 
           <div class="col-md-3"> 
            <div class="easy-pie-chart"> 
             <div class="number transactions" data-percent="55"> 
              <span>{{ steps }}</span> 
             </div> 

             </a> 
            </div> 
           </div> 
           <div class="margin-bottom-10 visible-sm"> 
           </div> 
           <div class="col-md-3"> 
            <div class="easy-pie-chart"> 
             <div class="number visits" data-percent="85"> 
              <span> 
              +85 </span> 
              % 
             </div> 

             </a> 
            </div> 
           </div> 
           <div class="margin-bottom-10 visible-sm"> 
           </div> 
           <div class="col-md-3"> 
            <div class="easy-pie-chart"> 
             <div class="number bounce" data-percent="46"> 
              <span> 
              +46 </span> 
              % 
             </div> 

             </a> 
            </div> 
           </div> 
           <div class="margin-bottom-10 visible-sm"> 
           </div> 
           <div class="col-md-3"> 
            <div class="easy-pie-chart"> 
             <div class="number bounce" data-percent="32"> 
              <span> 
              +32 </span> 
              % 
             </div> 

             </a> 
            </div> 
           </div> 

          </div> 
          </div> 
         </div> 
       </div> 
      </div> 
</div> 

Answer 1

はあなたのapp.jsファイルに補間記号を変更しました：

<h1>**{{ steps }}** </h1> 

<h1>**{$ steps $}** </h1> 

に：それは、あなたのテンプレートで、あなたは交換する必要があることを意味

MetronicApp.config(function($interpolateProvider) { 
    $interpolateProvider.startSymbol('{$'); 
    $interpolateProvider.endSymbol('$}'); 
}); 

またはapp.jsファイル内の行を削除して、デフォルトの補間記号を保持します。