标签: angular-controller

我想在点击链接后更改html模板.值为布尔值,初始值为true且加载了相应的模板,但是当值更改为false时,未加载新模板,我不知道原因.当boolean的初始值为true时,其他模板成功加载,但是在名为not的方法上加载.请帮忙.这是我的代码:

TaskCtrl

app.controller('TasksCtrl', ['$scope', 'TaskService', function ($scope, TaskService) {
    // initialize function
    var that = this;
    that.newTask = true;
    that.name = "My name is Nedim";

    that.templates = {
        new: "views/task/addTask.html",
        view: "views/task/viewTask.html"
    };

    // load all available tasks
    TaskService.loadAllTasks().then(function (data) {
        that.items = data.tasks;
    });

    $scope.$on('newTaskAdded', function(event, data){
        that.items.concat(data.data);
    });

    that.changeTaskView = function(){
        that.newTask = false;
        console.log("New task value: " + that.newTask);
    };

    return $scope.TasksCtrl = this;

}]);

task.html

<!-- Directive showing list of available tasks -->
<div class="container-fluid">
<div …

我有以下代码:

angular
  .module('myApp')
  .directive('layout', function () {
      return {
          restrict: 'E',
          template: '<div ng-include="layoutCtrl.pageLayout"></div>',
          controller: 'LayoutController',
          controllerAs: 'layoutCtrl',
          bindToController: true,
          scope: {
              pageLayout: '=',
              pageConfiguration: '=',
              isPreview: '='
          }
      };
  });

angular
  .module('myApp')
  .controller('LayoutController', LayoutController);

function LayoutController($scope, LayoutDTO, LayoutPreviewDTO) {
    var self = this;
    self.layoutDTO = LayoutDTO;
    self.layoutPreviewDTO = LayoutPreviewDTO;
    var test = $scope;

    if(self.isPreview)
        self.layoutModel = new self.layoutPreviewDTO(self.pageConfiguration);
    else
        self.layoutModel = new self.layoutDTO(self.pageConfiguration);
}


<div>
    <layout page-layout="ctrl.layoutTemplateUrl" page-configuration="ctrl.pageConfiguration" is-preview="false"></layout>
</div>

在角度1.5.3版本中,这按预期工作,我的控制器中的变量带有值.现在,自从我升级到1.6.x后,self.pageConfiguration现在未定义.

除角度版本外,没有任何改变.

如何处理传递给控制器​​中指令的值？

嗨我正在尝试一个显示政治推文情绪的网页.我正在尝试为情绪统计创建一个图表.我正在使用Zingchart,我能够创建静态数据,但我无法创建动态数据.

这是我用于插入带有数组chartdata的静态数据的代码.

   <div class="row">
    <div class="col-sm-12">
      <div ng-init="chartdata = [[1167],[456],[990]]">
        <zingchart id="chart-1" zc-values="chartdata" zc-json="myJson" 
         zc-width="100%" zc-height="568px"></zingchart>
      </div>
    </div>
  </div>

静态饼图

它工作正常,但我想使用来自angularjs的数据而不是静态值.例如:我试图做这样的事情,但它不起作用

  <div class="row">
      <div class="col-sm-12">
        <div ng-init="chartdata =[[{{politicianData.stats.total_positive}}],[{{politicianData.stats.total_negative}}],[{{politicianData.stats.total_neutral}}]]">
          <zingchart id="chart-1" zc-values="chartdata" zc-json="myJson" zc-width="100%" zc-height="568px"></zingchart>
        </div>
      </div>
    </div>

如何从角度控制器获取promise数组数据中的数据？

这是我的政治家 - 控制者:

    angular.module('myapp')
    .controller('PoliticianController', function($scope, PoliticianData, Politician, searchService, utilService) {
var politicianData = new Politician(PoliticianData);

        politicianData.$promise.then(function (result) {

            $scope.politicianData = result;
  });
$scope.myJson = {
                            globals: {
                            shadow: false,
                            fontFamily: "Verdana",
                            fontWeight: "100"
                                        },
                                        type: "pie",
                                        backgroundColor: "#fff",

                                        legend: {
                                            layout: …

我曾经有Angular Stripe Checkout表单,我正在尝试将我的表单更新为最近推出的新Stripe Card Elements.

删除表单输入字段并将其替换为Stripe Card元素后,我的表单如下所示:

<form name="payment" ng-submit="vm.submit()">
<div class="row">
    <label for="card-element">
      Credit or debit card
    </label>
    <div id="card-element">
      <!-- a Stripe Element will be inserted here. -->
    </div>
</div>
<button class="btn btn-primary" type="submit" ng-disabled="vm.submitting">Pay!</button>
<div ng-show="vm.cardError" class="row">
  <div class="has-error">
     <p class="help-block">* {{vm.cardError}}</p>
  </div>
</div>
</form>

以前在角,提交表单的时候,我正在处理submit(),并stripeResponseHandler从控制器.使用新更改更新我的Angular Controller后,我的控制器现在看起来像这样:

function PaymentController() {
        var vm = this;
        var elements = stripe.elements();
        var style = {
                          base: {
                            color: '#32325d',
                            lineHeight: '24px',
                            fontFamily: 'Helvetica Neue', …

app.js

(function(){
'use strict';

angular
    .module('app', ['ngRoute', 'ngCookies'])
    .config(config)

config.$inject = ['$routeProvider', '$locationProvider'];
function config($routeProvider, $locationProvider){
    $routeProvider
        .when('/', {
            controller: 'HomeController',
            templateUrl: 'home/home.html',
            controllerAs: 'vm'
        })
}
})();

home.controller.js

(function () {
'use strict';

angular
    .module('app')
    .controller('HomeController', HomeController);

HomeController.$inject = ['UserService', '$rootScope'];
function HomeController(UserService, $rootScope) {

    $rootScope.bodylayout ='main_page_que';
    var vm = this;
}
})();

home.js

var app = angular.module('app', []);
app.controller('RedCtrl', function($scope) {
  $scope.OpenRed = function() {
$scope.userRed = !$scope.userRed;
$scope.userBlue = false;
  }
  $scope.HideRed = function() {
$scope.userRed = …

我有一个Angularjs指令“ ExampleDirective”，它具有控制器“ ExampleController”。控制器定义了两个Promise对象，其中每个Promise对象都发出Http GET请求并返回响应。

在指令中，我们从promise对象获取响应数据，并对其进行处理以呈现指令。

在同一视图中，ExampleDirective实例化了两次，每个实例都发出了自己的Http GET请求。由于同时发送两个请求以进行昂贵的数据库调用并从同一表读取数据，这在前端导致性能问题。

控制器：

angular.module('exampleModule')
  .constant("EXAMPLE_URL", "{% url 'example:get_example' %}")
  .controller('exampleCtrl', ['$scope', '$http', 'EXAMPLE_URL', exampleCtrl]);

function exampleCtrl($scope, $http, EXAMPLE_URL) {
  $scope.examplePromise = $http.get(EXAMPLE_URL).then(function(response) {
    return response.data;
  });
}

指示：

angular.module('exampleModule')
.directive('exampleDirective', ['exampleFactory', 'STATIC_URL',      '$http', '$window', exampleDirective]);

function exampleDirective(exampleFactory, STATIC_URL, $http, $window) {
  return {
    scope: {
      title:'@?',
      loadingImage:'@?',
    },
    restrict: 'AE',
    templateUrl: STATIC_URL + 'example/example-template.html',
    controller: "exampleCtrl",

    link: function (scope, element, attrs) {

     //add default options:
    if (!scope.title) {
      scope.title = 'Example Title';
    }
    if (!scope.loadingImage) …

我收到了错误

未知提供商:$ userProvider < - $ user"

使用以下代码:

var app = angular.module('test', []);

app.factory("user", function($scope, $http) {
   var usr = {};
   usr.getAllLists = function(){
       return "test";
   }
   return usr;  
});

cart.controller("MyController", ["$scope", "$http", "$user", 
    function ($scope, $http, user){

        $scope.initialize = function(){
            $scope.lists = user.getAllLists();
        }

    }
]);

你看错了吗？

我有一个在 Chrome 上运行良好的控制器代码，但在 IE 10 上运行时返回相同的代码

ReferenceError: 'Promise' is undefined

返回错误的函数是：

new Promise(function(resolve) {
    MetaModel.load($scope, (regionExist ? reqParmRegion[1] : reqParmRegion), (screenExist ? reqParmScreen[1] : reqParmScreen), resolve);
}).then(function(){

    loadRelationshipByStep($scope.preStep);
     if($rootScope.regionId === 'us') {
        $rootScope.currRel = 'itself';
    } 

    if($rootScope.screenId.indexOf('search') !== -1 ){
       EnumerationService.loadEnumerationByTab();
    }  
    // load data for tab click
    if($rootScope.currRel !== 'undefined' && $rootScope.currRel !== 'itself' && $scope.regionId !== 'us'){
        $scope.loadDataByTab($rootScope.currRel);
    } else if($rootScope.resourceHref !== undefined) {
        var params = {};
         resourceFactory.get($rootScope.resourceHref, params, $rootScope.headers).success(function(responseData){
            var data = responseData.data || responseData;
            if …

我在我的新Angular项目中转而使用ES6(Babel).ES6类不能有变量.我如何设置我的$ scope变量？

说我有一个简单的控制器:

class MainController {
    constructor ($timeout, events) {
        'ngInject';

            this.textMaker = "Hello!" //Option #1


    } // constructor

    textMaker(){            //Option #2
        return "Hello!";
    }


} 


export default MainController;

我的html看起来像(在构建过程中控制器是自动注入的,比方说):

<h1> {{textMaker}}</h1>

选项#1和选项#2似乎都不起作用.我得到一个空白的标题.这么简单的事情......我做错了什么？

我在控制器指令中有这个电话

ngDialog.openConfirm({
        template          : '<form-directive></form-directive>',
        plain             : true,
        closeByNavigation : true,
        scope             : $scope
      })
      .then(function( response ) {
          $log('SENDED');
  });

零件

ngDialog.openConfirm({
        template          : '<form-component></form-component>',
        plain             : true,
        closeByNavigation : true,
        scope             : $scope
      })
      .then(function( response ) {
          $log('SENDED');
      });

两者的HTML

<form ng-submit="alert("Hello !!!")">
   <button type="submit">Send</button>
</form>

当我单击Button on指令时,我在控制台上看到SENDED消息,但是对于组件看起来像忽略每个NG属性,点击按钮什么都不做,但正确加载模板.

相同的模板,相同的一切,完全相同,所以也许是一个ngDialog类组件的错误吗？

我只是希望ng-attributes在里面工作,如果我点击按钮提交然后关闭对话框并获得promise日志消息

检查Plunkr示例

如果我使用范围,指令也会失败:其中的{obj:'='}属性组件忽略了所有内容.

我认为是Scopes的某种问题 - 指令中的范围声明(或组件中的绑定) - 以及openDialog对象中的范围