标签: angularjs-controller

所以我一直在阅读控制器中的jQuery操作是不好的做法,但我不清楚为什么或如何纠正.

下面是来自Youtube教程的代码,即使是视频创建者的评论也是一个坏主意,但无法解释为什么并继续使用不良行为.

来自https://www.youtube.com/watch?v=ilCH2Euobz0#t=553s:

$scope.delete = function() {
    var id = this.todo.Id;
    Todo.delete({id: id}, function() {
        $('todo_' + id).fadeOut();
    });
};

解决方案:

根据兰登在下面的回答,我已经得到了以下我自己的工作代码,这些代码与上面的示例代码略有不同:

var ProjectListCtrl = function ($scope, Project) {
    $scope.projects = Project.query();
    $scope.delete = function() {
        var thisElem = this;
        var thisProject = thisElem.project;
        var id = thisProject.id;
        Project.delete({id: id}, function() {
            var idx = $scope.projects.indexOf(thisProject);
            if (idx !== -1) {
                thisElem.destroy('removeItem('+idx+')');
            }
        });
    }

    $scope.removeItem = function(idx) {
        $scope.projects.splice(idx, 1);
    }

}

app.directive('fadeOnDestroy', function() {
    return …

我在angularjs中使用嵌套指令时遇到了一些麻烦.我想从另一个指令中的指令调用一个控制器方法,并试图将参数传递给它,但它们是未定义的.

我试图用下面的selected.html中的三个参数调用remove().它在我引入父指令之前工作(televisionFilter.js)任何人都可以建议如何将这些指令传递给控制器​​？

谢谢!

码:

controller.js

$scope.remove = function(selectorToRemove, choicesArr, selectedArr){
 console.log(selectorToRemove); //undefined
 console.log(choicesArr); //undefined
 console.log(selectedArr); //undefined
};

televisionFilter.js

angular.module('app.directives').directive('televisionFilter', function(){
  return{
    restrict: 'A',
    templateUrl: 'js/templates/television-filter.html',
    scope: {
      search: '=',
      selectedBrand: '=',
      submit: '&',
      remove: '&'
    }
  };
});

selected.js

angular.module('app.directives').directive('selected', function(){
  return{
    restrict: 'A',
    templateUrl: 'js/templates/selected.html',
    scope:{
    choicesArr: '=',
    selectedArr: '=',
    remove: '&'
  } 
  };
});

list.html

<div television-filter search='televisionSearch' submit="submit()" selected-brand='selectedBrand' remove='remove(selectorToRemove, choicesArr, selectedArr)'></div>

电视filter.html

<div selected selected-arr='search.selectedBrands' choices-arr='search.brands' remove='remove(selectorToRemove, choicesArr, selectedArr)'>

selected.html

<ul>
  <li ng-repeat="selected in selectedArr" class="filter-autocomplete-list" …

我在angularJS中创建了一个服务,它使用btford.socket-io模块与服务器进行交互.因为在服务中我实现了一些我目前在angular内部使用的API,但是为了以后扩展应用程序,我还需要在角度范围之外访问这些API.因此,将来可以在不需要创建控制器和其他东西的情况下调用该函数.

目前我为控制器做了这个

var myController = angular.element($('body')).scope().myController;

将整个控制器保存在范围变量中.我想知道是否可以对服务做同样的事情.

我定义了这些路线:

    .state('sport',
      url: '/sport'
      templateUrl: '/templates/sport'
      controller: 'SportCtrl'
    )
    .state('sport.selected'
      url: '/:sport'
      templateUrl: '/templates/sport'
      controller: 'SportCtrl'
    )

我让这个控制器试图使用sport.selected状态给出的运动参数.

     angular.module('myApp')
       .controller('SportCtrl', ['$scope', 'ParseService', 
                   '$stateParams', function ($scope, ParseService, $stateParams) {

          var sportURL = $stateParams.sport;

      ...
    });

出于某种原因,当我在控制器中调用$ stateParams.sport时,它返回undefined,即使我认为我在路由中定义了它.为什么会这样？

谢谢你的帮助!

我正在尝试创建一组Controller类,这些类派生自具有许多依赖项的基类.每次我想创建派生类时,我都必须将基类构造函数依赖项复制到派生类构造函数中.这看起来特别难看和重复.见下文;

module MyModule
{    
     export class ParentCtrl
     {
         constructor($http, $provide, $scope,$compile,MyService,$parse,$timeout)
         {
             console.log('parent');
         }

         FunctionA(){...}
         ...
         FunctionZ(){...}
     }

     export class ChildCtrl extends ParentCtrl
     {
         constructor($http, $provide, $scope,$compile,MyService,$parse,$timeout)
         {
           super($http, $provide, $scope,$compile,MyService,$parse,$timeout);
           console.log('child');
         }
         FunctionA(){ console.log('Override A'); }
     }

     export class GrandChildCtrl extends ChildCtrl
     {
         constructor($http, $provide, $scope,$compile,MyService,$parse,$timeout)
         {
           super($http, $provide, $scope,$compile,MyService,$parse,$timeout);
           console.log('grandchild');
         }
         FunctionB(){ console.log('Override B'); }
     }
 }

我已从构造函数参数中删除了类型定义,以便于阅读.

有没有办法避免这些冗长的构造函数被复制？我曾想过在base/Parent控制器中有一个函数,它从构造函数中调用以注入所需的类型.这意味着依赖关系将局限于基类.

有没有人成功尝试过这个？

我正在尝试将数据从AngularJS传递到ASP.net MVC并且始终为null.这是我的代码(仅发布基本,按钮,控制器和c#:

HTML:

<a class="btn btn-grey btn-lg btn-block" ng-click="AddCar()">Save</a>

调节器

$scope.AddCar = function () {
            $http.post("Cars/AddCar", JSON.stringify($scope.new.JsonCar)).success(function (data) {
                Alert(ok)
            })

C#

public string AddCar(string JsonCar) 
        {
            try
           ....
        }

在JSON.stringify($ scope.new.JsonCar)中,我得到了这个:

"{"名称":"菲亚特500","描述":"新车","MaxUserCapacity":5,"PhotoPath":"无"}"

我做错了什么？

如果我有以下内容:

myapp.directive('directivename', ...

    return {
        ...
        restrict: 'E',
        controller: MyController,
        ...
    }

    function MyController($scope, $somethingelse) {
        // Contents of controller here
    }
);

如何修改它以便MyController在缩小时不会被破坏？我收到以下错误:

错误:[$ injector:unpr]未知提供者:eProvider < - e

如何为AngularJS 1.3.8使用多个控制器？

我已经尝试过以下内容,但只有第一个控制器输出正确,第二个控制器输出{{ name }}和{{ age }}.

HTML:

<div ng-app="app" ng-controller="Ctrl">
    <label>Name:</label>
        <input ng-model="name">
    <label>Age:</label>
        <input ng-model="age">
    <h1>{{ name }}</h1>
    <h1>{{ age * 2 }}</h1>
</div>

<div ng-app="app2" ng-controller="Ctrl2">
    <label>Name:</label>
        <input ng-model="name">
    <label>Age:</label>
        <input ng-model="age">
    <h1>{{ name }}</h1>
    <h1>{{ age }}</h1>
</div>

<script>
    angular.module('app', [])
        .controller('Ctrl', ['$scope', function($scope) {
            $scope.name = "Jason";
            $scope.age = "21";
            $scope.$watch('name', function(){ // Logs the amount of times name changes
               console.log($scope.name);
            });
        }]);
</script>

<script>
    angular.module('app2', [])
        .controller('Ctrl2', ['$scope', function($scope) { …

我知道如何directive在子指令的link函数中获取父控制器.
但是,我宁愿避免使用link函数(和$scope所有在一起),并controller在指令的功能下拥有我的所有代码.

angular.directive('parent', function(){
    return {
        templateUrl: '/parent.html',
        scope: true,
        bindToController: true,
        controllerAs: 'parentCtrl',
        controller: function(){
            this.coolFunction = function(){
                console.log('cool');
            }
        }
    }
});

angular.directive('child', function(){
    return {
        templateUrl: '/child.html',
        require: '^parent',
        scope: true,
        bindToController: true,
        controllerAs: 'childCtrl',
        controller: function() {
            // I want to run coolFunction here.
            // How do I do it?
        }
    }
});

任何帮助表示赞赏!

我已经选择了一个项目,我正在尝试将一些数据从服务返回到我的控制器.我已经在这里待了大约12个小时,并尝试了不同的方法.它们通常都会产生同样的"缺失数据".

我试过了

• 使用$ resource而不是$ http
• 将$http.get右侧放在控制器内而不使用promises
• 服务作为实际服务(而不是工厂)没有返回
• 建立工厂的一系列不同方式以各种格式返回数据
• 使用setTimeout和$ apply

我觉得我现在所拥有的是一个简单的,因为我可以得到它,而我所读到的一切都说这应该有效

angularjs的负载数据从服务

角控制器斜面-GET-数据从服务

angularjs - 承诺 - 不烧时,返回-从一种服务

angularjs - 承诺 - 不解决,适当

angularjs-承诺

这些链接就是从今天开始的.

我认为可能存在$ scope问题,因为过去我已经看到$ scopes在使用多个控制器时没有获取数据,但是该站点只是在index.html中声明一个控制器作为<body ng-app="myApp" ng-controller="BodyCtrl">设置.主app.js使用状态(我认为来自ui-router)就像这样......

.state('app.view', {
    url: '/view',
    templateUrl: 'views/view.tpl.html',
    controller: 'MyCtrl'
   })

将控制器连接到不同的页面.此外,该网站还有一些其他控制器从服务中获取数据,我首先将其作为模板查看,然而,数据和返回比我想要的更复杂.但最重要的是,控制器正在访问服务提供的数据.他们都使用$ resource,这就是我从这个问题开始的方式.我坚持使用$ http因为它应该可以工作,而且我希望在我进入"更高级别"的东西之前使用它.另外,我只需要从端点获取GET,所以觉得$ resource太过分了.

服务

.factory('MyService', ['$http', '$q', '$rootScope', function ($http, $q, $rootScope) {
    var defer = $q.defer();
    var factory = {};
    factory.all = function () {
        $http({method: 'GET', url: 'http://URLtoJSONEndpoint'}). …