标签: angular-ui

我有一个输入输入.输入文本设置为在预先输入上选择的选项.但是,我想清除此文本并在从typeahead中选择其中一个选项后再次在文本框中显示"占位符"值(因为我将所选值添加到selectMatch()方法中的另一个div .

<input id="searchTextBoxId" type="text" 
    ng-model="asyncSelected" placeholder="Search  addresses..."
    typeahead="address for address in getLocation($viewValue) | filter:$viewValue"
    typeahead-loading="loadingLocations" class="form-control"
    typeahead-on-select="selectMatch(asyncSelected)" typeahead-min-length="3"
    typeahead-wait-ms="500">

我尝试使用其Id设置Input元素的文本值和占位符值,但这不起作用,例如:

// the input text was still the 
$('#searchTextBoxId').attr('placeholder', 'HELLO');

选定的结果

// the input text was still the selected result
$('#searchTextBoxId').val('');

如何设置或重置文本值？

我正在使用角度UI选择.

https://github.com/angular-ui/ui-select

我看了看这个plunkr的演示版本

我想从远程服务获取数据.每次用户在文本字段中键入内容.我想从远程服务获取数据,并根据输入值过滤结果.

我写了一个Web服务和Web服务工作正常.

如何使用angular ui select从远程服务获取数据？

目前我正在关注demo中的简单示例

  <ui-select multiple ng-model="multipleDemo.colors" theme="select2" ng-disabled="disabled" style="width: 300px;">
    <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
    <ui-select-choices repeat="color in availableColors | filter:$select.search">
      {{color}}
    </ui-select-choices>
  </ui-select>

availableColors是预定义的数组.我不想事先定义数据数组.

我一直在互联网上查找任何可能的文档或教程,但无法找到任何有用的东西.

是否可以在angular-ui中关闭模态指令的动画？http://angular-ui.github.io/bootstrap/

在选项中找不到任何内容.我应该修改源吗？或者,当您想要自定义时,是否有最佳实践？

假设我有以下3个Angular UI路由器状态:

$stateProvider
    .state('adminCompanies', {
        abstract: true,
        url: "/admin/companies",
        template: '<div ui-view class="viewContainer" autoscroll="false" />'
    })
    .state('adminCompanies.list', {
        url: "",
        templateUrl: 'app/admin/companies/companies.list.html',
        controller: 'AdminCompaniesController'
    })
    .state('adminCompanies.detail', {
        url: "/:companyId",
        templateUrl: 'app/admin/companies/companies.detail.html',
        resolve: {
            company: function(Model, $stateParams) {
                return Model.get("/admin/companies", $stateParams.companyId);
            }
        },
        controller: 'AdminCompanyDetailController'
    })

如果adminCompanies转换为直接转换,我如何告诉Angular UI Router转到adminCompanies.list状态？

理想情况下,我想要的是:

$stateProvider.when('adminCompanies', 'adminCompanies.list');

在我的代码中,我希望$ state.go('adminCompanies')等同于$ state.go('adminCompanies.list')

在多重嵌套视图的功能ui-router是很不错的-你可以很容易地从一个跳跃状态您的应用程序到另一个.

有时您可能想要更改URL,但有时不想.我觉得状态的概念应该与路由分开/可选.

这是一个显示我的意思的plunker. 这是ui-router文档中其中一个掠夺者的分支,下面有两个小的更改:

.state('route1', {
        url: "/route", // <---- URL IS SHARED WITH ROUTE2
        views: {
            "viewA": {
                template: "route1.viewA"
            },
            "viewB": {
                template: "route1.viewB"
            }
        }
    })
    .state('route2', {
        url: "/route", // <---- URL IS SHARED WITH ROUTE1
        views: {
            "viewA": {
                template: "route2.viewA"
            },
            "viewB": {
                template: "route2.viewB"
            }
        }
    })

这似乎有效 - URL保持不变.再次,这里做了多少冗余工作？这是经过批准/测试的用法吗？

如果你可以省略url一个州,那将是很好的..

更新:您可以省略州的网址.plunker

更新问题:这是经过批准/测试的用法吗？

我有一个父州,里面有两个孩子的州,我将根据这个州显示一个州URL.

在这两个中有states一个像param1和的参数param2,我params在状态定义中使用了ui-router选项.

州

$stateProvider.state('tabs.account', {
    url: '/account',
    views: {
        'content@tabs': {
            templateUrl: 'account.html',
            controller: function($scope, $stateParams) {
                //This params are internally used to make ajax and show some data.
                $scope.param1 = $stateParams.param1;
                $scope.param2 = $stateParams.param2;
            },
        }
    },
    params: {
        param1: { value: null }, //this are optional param
        param2: { value: null } //because they are not used in url
    }
});

如果你看看我的路线,params选项并没有真正引入其中URL,这就是为什么我当时认为是可选的.

问题

看看plunkr,我已经显示了两个标签Account& …

我想知道AngularJS和AngularUI之间的关系是什么？

快速查看贡献者列表似乎表明这两个项目都是由独立团队开发的.

有没有人更了解这两个项目之间的关系？

特别有趣的是AngularUI提供的东西(有一天)是否会合并到AngularJS中的问题.这对于诸如ui-router之类的东西非常有用.

任何人都比我更了解;-)？

我想显示一个表格,其中包含与编辑项目相对应的数据.我ui-router用于路由.我定义了一个州:

myapp.config(function($stateProvider) {

    $stateProvider.
    .state('layout.propertyedit', {
        url: "/properties/:propertyId",
        views : {
            "contentView@": {
                templateUrl : 'partials/content2.html', 
                controller: 'PropertyController'
            }
        }
    });

在PropertyController,我想设置$scope.property来自以下呼叫的数据(Google Cloud Endpoints):

    gapi.client.realestate.get(propertyId).execute(function(resp) {
        console.log(resp);
    });

我不知道是否可以使用,resolve因为数据是异步返回的.我试过了

    resolve: {
        propertyData: function() {
            return gapi.client.realestate.get(propertyId).execute(function(resp) {
                console.log(resp);
            });
        }
    }

第一个问题,propertyId未定义.你怎么得到propertyId的url: "/properties/:propertyId"？

基本上我想设置$scope.property在PropertyController向resp通过异步调用返回的对象.

编辑:

myapp.controller('PropertyController', function($scope, , $stateParams, $q) {

    $scope.property = {};

    $scope.create = function(property) {
    }

    $scope.update …

假设我们在$ stateProvider中定义了一个父子关系,如下所示:

    .state('myProfile', {
        url: "/my/profile",
        templateUrl: 'my/profile.html',
        controller: 'MyProfileController'
    }).state('myProfile.edit', {
        url: "/edit",
        templateUrl: 'my/profile.edit.html',
        controller: 'EditMyProfileController'
    });

这里的想法是父myProfile状态是不可编辑的,但子myProfile.edit状态是编辑配置文件的实际形式.让我们忽略,如果这是个人资料页面的工作方式 - 我只是在玩弄东西和学习.

当用户提交表单时,我使用$ state对象返回父页面:

$scope.save = function() {
    userResource.update($scope.user, function() {
        SessionService.refresh();

        $state.go('myProfile'); // also tried with reload: true as well
    });
}

之后,用户保存配置数据-这是得到正确保存-父母的观点并没有得到更新,除非我打了F5并刷新浏览器.

我注意到的一件事是,如果我将子myProfile.edit状态变为父本身而不是状态的子节点myProfile,这个问题实际上消失了,事情就像预期的那样(虽然布局看起来很糟糕).

似乎UI路由器可能会缓存父级的结果,不知道模型中的内容已经发生变化,是否需要重新运行控制器？

如何在父myProfile页面始终执行其控制器以重新加载其数据的同时保持父子关系？基本上,我希望无论何时$state使用或点击链接指向时都会发生这种情况myProfile.我怎样才能做到这一点？

如果我不能按照我的要求做,那么我知道我可以设置一堆子状态并让它们按预期工作......但是,如何为父设置默认子状态？例如,假设我想myProfile.edit成为默认的子状态myProfile- 我该怎么做？

谢谢!

对于这个问题,这是一个后续问题:在AngularJS单元测试中模拟$ modal

引用的SO是一个非常有用的答案的优秀问题.之后我留下的问题是:我如何对模态实例控制器进行单元测试？在引用的SO中,测试调用控制器,但模拟了模态实例控制器.可以说后者也应该进行测试,但事实证明这非常棘手.原因如下:

我将在这里复制引用的SO中的相同示例:

.controller('ModalInstanceCtrl', function($scope, $modalInstance, items){
  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function () {
    $modalInstance.close($scope.selected.item);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
});

所以我的第一个想法是,我只是直接在测试中实例化控制器,就像测试中的任何其他控制器一样:

beforeEach(inject(function($rootScope) {
  scope = $rootScope.$new();
  ctrl = $controller('ModalInstanceCtrl', {$scope: scope});
});

这不起作用,因为在这种情况下,angular没有提供者来注入$ modalInstance,因为它是由UI模式提供的.

接下来,我转向计划B:使用$ modal.open来实例化控制器.这将按预期运行:

beforeEach(inject(function($rootScope, $modal) {
  scope = $rootScope.$new();
  modalInstance = $modal.open({
    template: '<html></html>',
    controller: 'ModalInstanceCtrl',
    scope: scope
  });
});

(注意,模板不能是空字符串,否则会以密码方式失败.)

现在的问题是我无法看到范围,这是单元测试资源收集的习惯方式等.在我的实际代码中,控制器调用资源服务来填充选择列表; 我尝试测试这个设置expectGet以满足我的控制器正在使用的服务,我想验证控制器是否将结果放在其范围内.但模式是为模态实例控制器创建一个新的范围(使用我作为原型传入的范围),我无法弄清楚如何获得该范围的漏洞.modalInstance对象没有进入控制器的窗口.

有关"正确"测试方法的任何建议吗？

(注意:为模态实例控制器创建衍生作用域的行为并不是意料之外的 - 它是记录在案的行为.无论如何,我对如何测试它的问题仍然有效.)