标签: angularjs-controller

我有一个具有动态模板的指令,现在我希望指令能够使用不同的控制器.是否可以动态地将控制器分配给指令？如果可能的话,是否会将相同的"ctrlr"传递给link函数？

.directive('myDirective',['$compile',function($compile){
    return {
        restrict: 'AE',
        replace: true,
        transclude: true,
        scope: {},
        templateUrl: function(el,attrs){
            return (angular.isDefined(attrs.template)) ? attrs.template : '/tmpls/default';
        },
        link : function(scope,el,attrs,ctrlr,transFn){
            [... Do Stuff Here ...]
        },
        controller: [ DYNAMIC CONTROLLER ASSIGNMENT?? ]
    };
}]);

自解释小提琴:http://jsfiddle.net/5FG2n/6/

我需要根据其名称作为字符串动态选择要在运行时使用的控制器.该字符串将从配置对象中读取.

在下面的代码我目前已InnerCtrlAsLocalVariable分配给$scope.dynamicCtrl.我怎么分配InnerCtrlFromModule给财产？

视图:

<div ng-app='app' ng-controller='OuterCtrl'>
    <div ng-controller='dynamicCtrl'>
        {{message}}
    </div>
</div>

JS:

var InnerCtrlAsLocalVariable = ['$scope',
    function($scope) {
        $scope.message = 'from controller as local variable - do not want'
    }
];

angular.module('app', []) 

    .controller('OuterCtrl', ['$scope', 

        function($scope) {
            // Instead of doing this...
            $scope.dynamicCtrl = InnerCtrlAsLocalVariable;

            // ...I want to do something like this:
            // $scope.dynamicCtrl = resolveCtrl('InnerCtrlFromModule');                                               
        }
    ])

    .controller('InnerCtrlFromModule', ['$scope',
        function($scope) {
            $scope.message = 'from controller defined in module …

我的Angular应用程序中有两个控制器.当某个数据更新为一个时,它会发出$ broadcast事件,如下所示:

        $scope.updateTableInfo = function (table) {
           $rootScope.$broadcast ("updateTableInfo", table);
        }

在另一个控制器中,有一个侦听器设置,用于侦听此更新:

       $rootScope.$on ("updateTableInfo", function (event, table) {
              // do stuff here
       });

不幸的是,似乎如果在第一个控制器中定义updateTableInfo()之后立即调用它,则第二个控制器还没有准备好收听它,并且错过了更新.如何确保控制器始终可以相互通信？

如何在AngularJS/Bootstrap工具提示中添加自定义展示位置/动画？我可以:

myApp.controller('TooltipCtrl', function ($scope) {
  $scope.htmlTooltip = 'Here is a tooltip!';
});

它完美无缺,但如果我添加:

$scope.setTriggers({
  placement: 'right'
});

在控制器内部,我得到一个"未定义不是函数"错误.我在语法上做错了什么？

编辑:

我也试过这样做:

myApp.controller('TooltipCtrl', function ($scope) {
  $scope.placement = 'right';
  $scope.htmlTooltip = 'Here is a tooltip!';
});

但它似乎对工具提示上的位置没有影响.

我正在尝试检索a的当前选项的值select,但它返回undefined(我希望它返回一个对象).

标记:

<div ng-app ng-controller="MyCtrl">
    <select ng-model="selectedLocal" ng-options="item.Nome for item in locais" ng-change="localSelectChange()">
        <option value="">Locais</option>
    </select>
</div>

控制器:

function MyCtrl($scope) {
    $scope.locais = [{
        ID: 109,
        Nome: 'Aeroporto Internacional Hercilio Luz'
    }, {
        ID: 161,
        Nome: 'Koxixos'
    }, {
        ID: 184,
        Nome: 'Praça XV de Novembro'
    }];

    $scope.localSelectChange = function() {
        alert('$scope.selectedLocal: ' + $scope.selectedLocal); // returns undefined
    }
}

奇怪的是我创建了这个jsfiddle以重现问题,使用完全相同的代码,并且它可以工作.

更新:

我在这里创建了一个plunkr ,我在那里复制了这个问题.

第一个选择包含在具有自己的控制器"MyCtrl"的div上,并且它按预期工作,因为我能够从ng-change事件处理函数中检索模型.

第二个选择"属于"DashCtrl,整个Dash选项卡视图控制器.当我尝试从ng-change事件处理函数中检索模型时,它返回undefined.这是为什么？

我有一个AngularJS应用程序,它取决于web服务,我想在加载应用程序后从远程主机加载一些更多的控制器到应用程序中.我不知道我有可能吗？

在我的控制器中,我想加载一些更多的控制器(js文件)

.controller('FrontpageCtrl', function($scope, $stateParams, $filter, $sce, contentService) {
    console.log("hitting FrontpageCtrl ... ");
    contentService.promise.then(function(data){
        var page = $filter('filter')(data, {id:$stateParams.pageId})[0];
        $scope.content = $sce.trustAsHtml(page.content);

        // Load a controller, directive and other provided by the webservice!
        $scope. ...
    });
})

我想保留控制器的实例而不重新加载.我设置reloadOnSearch为false,我在控制器中管理路由更改.这是代码.

这是我链接的示例<a href="products/page/2">next</a>.我已经定义了以下模块.

angular.module('app.products', ['ngRoute', 'ngResource'])
.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
            .when('/:section/:view/:number', {
                templateUrl: 'tpl/table.html',
                controller: 'ProductsCtrl',
                controllerAs: 'productsCtrl',
                reloadOnSearch: false
            });
}])
.controller('ProductsCtrl', ['$scope', '$routeParams', '$location', ProductsCtrl]);

调节器

function ProductsCtrl($scope, $routeParams, $location) {

    $scope.$on('$routeUpdate', function () {
        console.log("routeUpdate");
    });

}

但是控制器不会响应更改的路由,并且文本不会写入控制台输出.

我有一个与控制器的语法以及在AngularJS中声明它们的方式有关的问题。我相当确定我知道它们是如何工作的，但是我的问题与语法有关。

所以我可能会有这样的事情：

// MODULE:
var weatherApp = angular.module("weatherApp", ['ngRoute', 'ngResource']);

// Home Page Controller:
weatherApp.controller('homeController', ['$scope', function($scope) {
    // Controller business operation   
}]);

第一行声明weatherApp变量，它是我的模块，并且与我的页面相关联。并且module()是一种以模块名称和该模块使用的依赖项列表为参数的方法。那正确吗？

主要问题与控制器定义有关。

weatherApp.controller('homeController', ['$scope', function($scope) {
    // Controller business operation   
}]);

在上一个weatherApp变量（我的模块）上，我调用controller()方法来设置控制器设置。因此，第一个参数是控制器名称（homeController在这种情况下），然后是一个数组，该数组首先必须包含依赖项列表（在这种情况下，只有$scopeAngularJS提供的服务），而最后一个元素是一个将这些依赖项作为实现控制器行为的输入参数。

为什么Angular会这样做？为什么依赖关系和实现控制器的功能在单个数组中一起传递？

也许我在理解这种行为方面有些困难，因为我来自Java背景，在该背景下，数组不能包含不同类型的对象，而函数不是对象。

我有一个factory在获取json文件时向我提供的承诺:

myapp.factory('topAuthorsFactory', function($http, $q) {
    var factory = {
        topAuthorsList: false,
        getList: function() {
            var deffered = $q.defer();
            $http.get('../../data/top_10_authors.json')
                .success(function(data, status) {
                    factory.topAuthorsList = data;
                }).error(function(data, status) {
                    deffered.reject('There was an error getting data');
                });
            return deffered.promise;
        }
    };
    return factory;
});

在我的controller我想要json在我的控制台上显示文件的内容如下:

myapp.controller('topAuthorsController', function($scope, topAuthorsFactory) {


  $scope.listAuthors = topAuthorsFactory.getList().then(function(topAuthorsList) {

      $scope.listAuthors = topAuthorsList;
      console.log('Testing...');

  }, function(msg) {
    alert(msg);
  });

  console.log($scope.listAuthors);
    }

但是在我的控制台中,我得到了这个:

那我怎么解决这个问题呢？为什么我在控制台中看不到"测试......"的消息？

很长一段时间后,我不得不再集中一个角.但我失败了......

... ng-repeat ="在DataController.getObjects中的n"

myApp.controller('DataController', [function () {

    console.log('test 1');

    var getObjects = function () {
        console.log('test 2');
        return [1,2,3,4,5,6,7];
    };

}]);

它将测试1写入控制台但不测试2.并且前端没有得到阵列.

有什么暗示吗？

问候n00n