从浏览器控制台调用Angular Controller函数（浏览器控制台调用js方法）

25-03-03 18

本篇文章给大家谈谈从浏览器控制台调用AngularController函数，以及浏览器控制台调用js方法的知识点，同时本文还将给你拓展Angular.controller()在.run()Angula

本篇文章给大家谈谈从浏览器控制台调用Angular Controller函数，以及浏览器控制台调用js方法的知识点，同时本文还将给你拓展Angular .controller()在.run()AngularJS之前运行、Angular controller调用factory、Angular controller调用services、angularJS controller 控制器获取控制父级标签等相关知识，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

从浏览器控制台调用Angular Controller函数（浏览器控制台调用js方法）
Angular .controller()在.run()AngularJS之前运行
Angular controller调用factory
Angular controller调用services
angularJS controller 控制器获取控制父级标签

从浏览器控制台调用Angular Controller函数（浏览器控制台调用js方法）

是否可以从控制台（Chrome开发者工具控制台）调用AngularJS控制器功能？

例如

app.controller(''AddCtrl'', [''$scope'', function ($scope) {    $scope.save = function(){        // do stuff here - call it from console    };}]);

答案1

小编典典

是的，您只需要使用angular.element即可获取位于控制器范围内的元素：

angular.element("yourElement").scope().save();

Angular .controller()在.run()AngularJS之前运行

我在.run()中有一个ajax调用,它将一个变量加载到$rootScope中.在与视图关联的控制器中需要该变量.
有时在.controller加载时刷新(F5)时,$rootScope.SuperCategories中没有任何内容.

sampleApp.factory('SuperCategoryService',['$http','$q','$rootScope',function ($http,$q,$rootScope){

    var SuperCategoryService =  {};
    SuperCategoryService.SuperCategories = $rootScope.SuperCategories;
    alert ($rootScope.SuperCategories);
    return SuperCategoryService;

}]);



sampleApp.run(function($rootScope,$http) {

    var req = {
        method: 'POST',url: 'SuperCategoryData.txt',//url: 'http://localhost/cgi-bin/superCategory.pl',headers: { 'Content-Type': 'application/x-www-form-urlencoded' }//,//data: { action: 'GET' }
    };


    $rootScope.SuperCategories = [];

    $rootScope.GetSuperCategories = function () {

        var defer = $q.defer();
        $http(screq).then(function(response) {
            $rootScope.SuperCategories = response.data;
            //alert ($rootScope.SuperCategories);
            defer.resolve($rootScope.SuperCategories);
        },function(error) {
            defer.reject("Some error");
        });
        return defer.promise;
    }

    $rootScope.GetSuperCategories();


});

如何解决这个bug.

解决方法

注意：这不是你问题的直接答案.
我只是试图以一种利用promises和工厂更常见的方式重写你的代码,可能会给你一些可以改进的想法,以使异步代码更可预测地工作.

控制器调用工厂来获取数据,当Promise得到解决时,你会在$rootScope.SuperCategories中获得数据

sampleApp.factory('SuperCategoryService',$q){

    var req = {
        method: 'POST',//data: { action: 'GET' }
    };

    var SuperCategoryService =  {};

    SuperCategoryService.SuperCategories = function () {

        var defer = $q.defer();
        $http(screq).success(function(response) {
            defer.resolve(response);
        });
        return defer.promise;
    }


    return SuperCategoryService;

}]);



sampleApp.controller('myController',['$scope','SuperCategoryService',function($scope,SuperCategoryService) {

   SuperCategoryService.SuperCategories().then(function(data){
             $rootScope.SuperCategories = data;
        });


});

Angular controller调用factory

1、定义 factory.js 文件

var appFactorys = angular.module('starter.factorys',[])
appFactorys.factory('HouseFactory',function () {
    var houseList = [
        { id: 0,title: '急售北二环 小区配套齐全 精装修',price: '88.0',describe: '2室1厅 120平米',img: 'img/ben.png' },{ id: 1,title: '急售东二环 小区配套齐全 精装修',img: 'img/max.png' },{ id: 2,title: '急售南二环 小区配套齐全 精装修',price: '87.0',img: 'img/adam.jpg' },{ id: 3,title: '急售西二环 小区配套齐全 精装修',price: '86.0',img: 'img/perry.png' },{ id: 4,price: '85.0',img: 'img/mike.png' }
    ];
    return {
            all: function () {
                return houseList;
            },};
});

2、在 app.js 文件引用 factory.js 文件

angular.module('starter',['ionic','ngCordova','starter.directives','starter.factorys','starter.services','starter.customControllers'])

3、在controller中调用factory

appControllers.controller('HouseCtrl',function ($scope,$timeout,$ionicModal,$ionicActionSheet,$http,$cordovaToast,$ionicLoading,HouseFactory) {
    // $scope.houseList = [
    //     { id: 0,//     { id: 1,//     { id: 2,//     { id: 3,//     { id: 4,img: 'img/mike.png' }
    // ];

    /* 调用Factory.js数据 */
    $scope.houseList = HouseFactory.all();

})

4、html页面调用

<ion-list>
    <ion-itemng-repeat="item in houseList" href="#/housedetail/{{item.id}}"https://www.jb51.cc/tag/ott/" target="_blank">ottom:2px">
        <img ng-src="{{item.img}}">
        <h2>{{item.title}}</h2>
        <dd>{{item.price}}万元</dd>
        <dd>{{item.describe}}</dd>
    </ion-item>
</ion-list>

Angular controller调用services

1、定义 factory.js 文件

var appFactorys = angular.module('starter.factorys',[])
appFactorys.factory('GoodsFactory',function () {
    var goodsList = [
        { "id": 1,"title": "手机","icon": "icon ion-android-phone-portrait calm","href": "#/homes/index" },{ "id": 2,"title": "笔记本","icon": "icon ion-android-laptop energized",{ "id": 3,"title": "电脑","icon": "icon ion-monitor assertive",{ "id": 4,"title": "数码产品","icon": "icon ion-android-camera balanced",{ "id": 5,"title": "摩托车","icon": "icon ion-stats-bars balanced",{ "id": 6,"title": "自行车","icon": "icon ion-android-bicycle calm",{ "id": 7,"title": "电动车","icon": "icon ion-stats-bars assertive",{ "id": 8,"title": "三轮车","icon": "icon ion-stats-bars positive",{ "id": 9,"title": "家具",{ "id": 10,"title": "家用电器","icon": "icon ion-stats-bars calm",// { "id": 11,"title": "服饰箱包","icon": "icon ion-tshirt assertive",{ "id": 11,"icon": "icon ion-bag assertive",{ "id": 12,"title": "母婴儿童",];
    return {
        all: function () {
            return goodsList;
        },};
});

2、定义 services.js 文件，并且调用factory函数

var appServices = angular.module('starter.services',[])
appServices.service('GoodsService',function (GoodsFactory) {
    return {
        query: function () {
            return GoodsFactory.all();
        },};
});

3、在 app.js 文件引用 factory.js、services.js 文件

angular.module('starter',['ionic','ngCordova','starter.directives','starter.factorys','starter.services','starter.customControllers'])

4、在controller中调用services

appControllers.controller("SecondHandGoodsCtrl",function ($scope,$state,$ionicModal,$cordovaToast,GoodsService) {
    /* 调用services.js数据 */
    $scope.categoryList = GoodsService.query();
})

5、html页面调用

<div>
    <ion-itemng-repeat="item in categoryList">
        <ul>
            <li>
                <a href="#/housekeeping">
                    <dt><i></i></dt>
                    <dd>{{item.title}}</dd>
                </a>
            </li>
        </ul>
    </ion-item>
</div>

angularJS controller 控制器获取控制父级标签

https://www.bokeyy.com/post/parent-child-controller-communication.html （译文）

https://rclayton.silvrback.com/parent-child-controller-communication（原文）

我最近经在教很多个朋友 AngularJS，而他们几乎都问了同样一个问题：

如何在 controller 之间传递消息（状态）？

这是个好问题。通常对初学者来说，它不直观。答案比我们想的要复杂（但实现起来很简单）。

有好多方法可以在 controller 之间通信。在接下来一系列的博文中（译者注：链接见文末），我会展示这些方法，并讨论它们原理上的缺点。

本文中，我会讨论最简单、也最容易滥用的方法：

父子 Controller 通信

和名称一样，这种方法只在一个 controller （子）被另一个 controller （父）所包含的情况下可用。

<div ng-controller="ParentCtrl">
    <div ng-controller="ChildCtrl"></div>
</div>

在 AngularJS 中，Scope是 controller 的上下文（view 层可用的数据）。它是可以继承的。也就是说，父 controller 中定义的变量和函数对子 controller 来说也是可用的。这里有一些例子：

父 controller 中定义的变量会应用到子 controller 中。

看看如下结构：

<div ng-controller="ParentCtrl">
    <h1>{{ title }}</h1>
    <div ng-controller="ChildCtrl">
        <h1>{{ title }}</h1>
    </div>
</div>

假设这些 controller 定义如下：

app.controller("ParentCtrl",[ '$scope',function($scope){
    $scope.title = "I'm the Parent.";
 }]);

app.controller("ChildCtrl",function($scope){
    // nothing defined on $scope
}]);

你会得到像这样的输出结果：

如果子 scope 中定义了父 scope 中的同名变量，父 scope 中那个变量在子 scope 中会被隐藏起来。

在上一个例子中，子 scope 继承了父 scope 中的$scope.title 变量。如果子 scope 定义了自己的 $scope.title ：

app.controller("ParentCtrl", [ '$scope'function($scope){
    $scope.title = "I'm the Parent.";
 }]);

"ChildCtrl""I'm the Child.";
);

父 scope 中的 $scope.title 的值会被隐藏，当然，仅限在这个子 scope 中发生（父 scope 中的变量是独立的）：

子 scope 可以直接访问（甚至修改）父 scope 中的值，但是反过来却不行。

关于从浏览器控制台调用Angular Controller函数和浏览器控制台调用js方法的介绍已经告一段落，感谢您的耐心阅读，如果想了解更多关于Angular .controller()在.run()AngularJS之前运行、Angular controller调用factory、Angular controller调用services、angularJS controller 控制器获取控制父级标签的相关信息，请在本站寻找。

本文标签：