标签: angularjs

在下面的代码中,AngularJS $http方法调用URL,并将xsrf对象作为"请求有效负载"提交(如Chrome调试器网络选项卡中所述).jQuery $.ajax方法执行相同的调用,但将xsrf提交为"Form Data".

如何让AngularJS将xsrf作为表单数据而不是请求有效负载提交？

var url = 'http://somewhere.com/';
var xsrf = {fkey: 'xsrf key'};

$http({
    method: 'POST',
    url: url,
    data: xsrf
}).success(function () {});

$.ajax({
    type: 'POST',
    url: url,
    data: xsrf,
    dataType: 'json',
    success: function() {}
});

我理解ng-show并ng-hide影响元素上的类集,并ng-if控制元素是否作为DOM的一部分呈现.

有没有对选择的准则ng-if在ng-show/ ng-hide或反之亦然？

我的问题涉及如何在AngularJS应用程序中处理模板(也称为部分)的复杂嵌套.

描述我的情况的最好方法是使用我创建的图像:

正如您所看到的,这可能是一个包含大量嵌套模型的相当复杂的应用程序.

应用程序是单页面的,因此它会加载一个index.html,其中包含DOM中带有ng-view属性的div元素.

对于圆圈1,您会看到有一个主要导航将相应的模板加载到ng-view.我是通过传递$routeParams到主app模块来做到这一点的.这是我的应用程序中的一个示例:

angular.module('myApp', []).
    config(['$routeProvider', function($routeProvider) {
        $routeProvider.                     
            when("/job/:jobId/zones/:zoneId", { controller: JobDetailController, templateUrl: 'assets/job_list_app/templates/zone_edit.html' }).
            when("/job/:jobId/initial_inspection", { controller: JobDetailController, templateUrl: 'assets/job_list_app/templates/initial_inspection.html' }).
            when("/job/:jobId/zones/:zoneId/rooms/:roomId", { controller: JobDetailController, templateUrl: 'assets/job_list_app/templates/room_edit.html' })       

    }]);

在圆圈2中,加载到其中的模板ng-view具有附加的子导航.然后这个子导航需要将模板加载到它下面的区域 - 但由于ng-view已被使用,我不知道如何去做.

我知道我可以在第一个模板中包含其他模板,但这些模板都非常复杂.我想将所有模板分开,以使应用程序更容易更新,并且不必依赖于必须加载的父模板才能访问其子代.

在第3圈中,您可以看到事情变得更加复杂.子导航模板可能具有第二个子导航,需要将其自己的模板加载到圆圈4中的区域

如何构建AngularJS应用程序来处理模板的这种复杂嵌套,同时保持它们彼此分离？

我正在编写一个小型AngularJS应用程序,它具有登录视图和主视图,配置如下:

$routeProvider
 .when('/main' , {templateUrl: 'partials/main.html',  controller: MainController})
 .when('/login', {templateUrl: 'partials/login.html', controller: LoginController})
 .otherwise({redirectTo: '/login'});

我的LoginController检查用户/传递组合并在$ rootScope上设置一个反映这个的属性:

function LoginController($scope, $location, $rootScope) {
 $scope.attemptLogin = function() {
   if ( $scope.username == $scope.password ) { // test
        $rootScope.loggedUser = $scope.username;
        $location.path( "/main" );
    } else {
        $scope.loginError = "Invalid user/pass.";
    }
}

一切正常,但如果我访问http://localhost/#/main我最终绕过登录屏幕.我想写一些类似"每当路由改变时,如果$ rootScope.loggedUser为null然后重定向到/ login"

...

......等一下 我能以某种方式听路线变化吗？无论如何我会发布这个问题并继续寻找.

有没有办法让像ngClass这样的表达式成为条件.例如,我尝试了以下内容:

<span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span>

这段代码的问题在于,无论obj.value1是什么,类测试总是应用于元素.这样做:

<span ng-class="{test: obj.value2}">test</span>

只要obj.value2不等于truthy值,该类就不应用.现在我可以通过这样做来解决第一个例子中的问题:

<span ng-class="{test: checkValue1()}">test</span>

checkValue1函数如下所示:

$scope.checkValue1 = function() {
  return $scope.obj.value === 'somevalue';
}

我只是想知道这是否是ngClass应该如何工作.我也在构建一个自定义指令,我想做类似的事情.但是我找不到观察表达的方法(也许这是不可能的,也就是为什么它会像这样工作).

这是一个显示我的意思的plnkr:

http://plnkr.co/edit/iSh0t8swDEyGbh7ylZg2?p=preview

我有一系列产品,我正在重复使用ng-repeat和我正在使用

<div ng-repeat="product in products | filter:by_colour"> 

用颜色过滤这些产品.过滤器正在运行,但如果产品名称/描述等包含颜色,则在应用过滤器后产品仍然存在.

如何将过滤器设置为仅应用于数组的颜色字段而不是每个字段？

我有一个AngularJS服务,我想用一些异步数据进行初始化.像这样的东西:

myModule.service('MyService', function($http) {
    var myData = null;

    $http.get('data.json').success(function (data) {
        myData = data;
    });

    return {
        setData: function (data) {
            myData = data;
        },
        doStuff: function () {
            return myData.getSomeData();
        }
    };
});

显然这不会起作用,因为如果某些东西doStuff()在myData返回之前尝试调用,我将得到一个空指针异常.据我所知,从这里和这里提出的其他一些问题,我有几个选择,但没有一个看起来很干净(也许我错过了一些东西):

使用"运行"设置服务

设置我的应用时,请执行以下操作:

myApp.run(function ($http, MyService) {
    $http.get('data.json').success(function (data) {
        MyService.setData(data);
    });
});

然后我的服务看起来像这样:

myModule.service('MyService', function() {
    var myData = null;
    return {
        setData: function (data) {
            myData = data;
        },
        doStuff: function () {
            return myData.getSomeData();
        } …

控制器之间通信的正确方法是什么？

我目前正在使用一种可怕的软糖包括window:

function StockSubgroupCtrl($scope, $http) {
    $scope.subgroups = [];
    $scope.handleSubgroupsLoaded = function(data, status) {
        $scope.subgroups = data;
    }
    $scope.fetch = function(prod_grp) {
        $http.get('/api/stock/groups/' + prod_grp + '/subgroups/').success($scope.handleSubgroupsLoaded);
    }
    window.fetchStockSubgroups = $scope.fetch;
}

function StockGroupCtrl($scope, $http) {
    ...
    $scope.select = function(prod_grp) {
        $scope.selectedGroup = prod_grp;
        window.fetchStockSubgroups(prod_grp);
    }
}

我正在定义一个自定义过滤器:

<div class="idea item" ng-repeat="item in items" isoatom>    
    <div class="section comment clearfix" ng-repeat="comment in item.comments | range:1:2">
        ....
    </div>
</div>

正如您所看到的那样,使用过滤器的ng-repeat嵌套在另一个ng-repeat中

过滤器的定义如下:

myapp.filter('range', function() {
    return function(input, min, max) {
        min = parseInt(min); //Make string input int
        max = parseInt(max);
        for (var i=min; i<max; i++)
            input.push(i);
        return input;
    };
});

我越来越:

错误:不允许在转发器中重复.Repeater:在item.comments中发表评论| 范围:1:2 ngRepeatAction @ https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/an

在编写Angular指令时,可以使用以下任何函数来操作声明指令的元素的DOM行为,内容和外观:

• 编
• 调节器
• 前链路
• 后链接

对于应该使用哪种功能似乎存在一些混淆.这个问题包括:

指令基础知识

• 如何申报各种功能？
• 源模板和实例模板有什么区别？
• 执行指令函数的顺序是什么？
• 这些函数调用之间还会发生什么？

功能性,做和不做

• 编
• 调节器
• 预链接
• 帖子链接

相关问题:

• 指令:链接vs编译与控制器.
• 定义angular.js指令时,'controller','link'和'compile'函数之间的区别.
• angularjs中的编译和链接函数有什么区别.
• AngularJS指令中的pre-compile和post-compile元素之间的区别？.
• Angular JS指令 - 模板,编译或链接？.
• 在Angular js指令中发布链接与预链接.