标签: angular-ui

我正在尝试在我的d3可视化中使用angularjs 工具提示指令,所以我有类似的东西

var node = svg.selectAll(".node")
    .data(nodes)
    .enter().append("circle")
        .attr("tooltip-append-to-body", true)
        .attr("tooltip", function(d) {
            return d.name;
        })
// ... attributes

但是,工具提示未显示.我需要$compile什么？我也试过把它包裹起来$timeout,但那不起作用.

首先单击状态时,拥有"ui-view"属性的div将替换为该状态的"模板".但是,当我再次单击相同的状态时,其控制器不会重新加载.如何让此控制器再次加载？

例如,假设我有以下导航菜单:

<nav> 
    <a ui-sref="state1">State 1</a>
    <a ui-sref="state2">State 2</a>
</nav>

我的"ui-view"内容如下:

<div ui-view></div>

我的州描述如下.当我点击导航菜单上的"状态1",我希望看到的文本"Ctrl 1 loaded"上developer console.如果这是第一次,那么我会观察那个文字.但是,当我重新单击相同的链接时,控制器没有再次加载,我无法看到"Ctrl 1 loaded"控制台上显示的文本两次.

myApp.config(function ($stateProvider, $urlRouterProvider){
    $stateProvider.state("state1", {
        url: "#",
        template: "<p>State 1</p>",
        controller: "Ctrl1"
      }).state("state2", {
        url: "#",
        template: "<p>State 2</p>",
        controller: "Ctrl2"
      });
});

为什么？你有什么主意吗？

这是这个问题的JSFiddle.

在我的Angular应用程序的几个地方,我需要使用ESC键清除用户的输入.问题是,我不知道如何使用文本输入字段(textarea正在清除).看到这个小提琴:

jsFiddle示范问题

捆绑:

<input ng-model="search.query" ui-keypress="{esc: 'keyCallback($event)'}" />

我使用的回调:

$scope.keyCallback = function($event) {
  $event.preventDefault();
  $scope.search.query = '';
}

任何人都可以,弄清楚我需要做什么来用ESC键清除文本输入？

解决方案: 正如bmleite所建议的那样,你不应该听' keypress '而是'keydown'和'keyup'.问题是,'keydown'在Firefox中不起作用,所以只有'keyup'才能听取ESC的魔术.;)

工作小提琴:http://jsfiddle.net/aGpNf/190/

解决方案更新: 最后我不得不听'keydown'和'keyup'事件.因为在我的情况下FF确实将ESC keydown上的输入字段重置为之前的状态,所以它搞砸了我的模型.所以'keyup'清除模型和'keydown'检查模型是否为空并执行适当的操作.我还需要手动散焦输入,以防止文本弹出.:/

我使用状态来更改表中的数据.网址就是这种形式/zone/:zoneCode.
但是,当只是/zone访问时我希望它默认为某个zoneCode.

这是我的代码:

.state('zone',
{
    url:'/zone',
    controller:'ZoneController',
    templateUrl:'views/zone.html'
})
.state('zone.code',
{
    url:'/:zoneCode',
    templateUrl:function(stateParams)
    {
        return 'views/zone-codes/'+stateParams.zoneCode+'.html';
    }
}

为每个子视图加载的模板包含一个显示数据的表.
如果zoneCodeURL中不存在,则该表不存在,因为ui-view不知道要加载templateUrl.

如何为父状态设置默认值？

谢谢.

我有一个带注册表格的模态.相同的表单应显示在目标网页的底部而不是模式中.

目前我的处理注册模式的控制器$modalInstance作为其参数之一$scope等.如果我添加ng-controller="SignUpCtrl"到着陆页中的元素,它不起作用,因为控制器不是通过$modal.open方法创建的,所以Angular抱怨Unknown provider: $modalInstanceProvider <- $modalInstance.

我有一个注册用户的服务(authService.signUp(data).then/catch...)但是控制器本身做了一些 - 处理输入,发出事件(例如翻译错误消息),设置cookie等.

在不重复几乎整个控制器代码的情况下处理此类案例的最佳方法是什么？我应该将代码从控制器移动到另一个更高级别的服务吗？

我正在使用AngularUI在我的Angular 1.4应用程序中集成Bootstrap组件,例如Modals.

我在我的控制器中调用一个模态,如下所示:

var modalInstance = $modal.open({
  animation: true,
  templateUrl: '/static/templates/support-report-modal.html',
  controller: 'ModalInstanceCtrl'
});

不幸的是,当我想通过使用以下方式关闭Modal时:

modalInstance.close();

模态本身消失了,背景也逐渐消失,但它没有从DOM中删除,因此它覆盖了整个页面,使页面无响应.

当我检查时,我看到了这个:

在https://angular-ui.github.io/bootstrap/#/modal上的文档中的示例中,modal-open将从正文中删除该类,并modal-backdrop在关闭时从DOM中删除整个类.为什么模态逐渐消失,但在我的示例中没有从DOM中删除背景？

我已经检查了许多关于bootstrap Modals背景的其他问题,但我似乎无法弄清楚出了什么问题.

如何使用ng-click而不是应用ui-sref的链接来更改route.state.

我试过这个:

<button ng-click="selectDir(file.fullPath)">set</button>

同

$scope.selectDir = function(location) {
    options.storageLocation = location;
    $route.current = 'recorder.options';
}

但它不起作用.有任何想法吗？

我正在使用angular-ui-bootstrap-bower#0.7.0 with angular#1.2.10,当打开一个模式,控制器是一个"老式"控制器时,一切正常.

但是,当我有一个控制器意味着使用新的"控制器作为语法"时,它不起作用.angular-ui-bootstrap模式是否与控制器一起作为语法？0.7版是否支持它？怎么做？

AngularJs UI中的预先输入功能看起来简单而强大,但我一直试图弄清楚如何在前导字符上进行匹配.例如,如果我在输入框中键入"A",我希望看到以"A"开头的所有状态,而不是名称中包含"A"的所有状态.我一直在寻找几天在这一点上,似乎Angular有一个自定义过滤器的概念,它有一个'比较器'.这个文档有一个简单的例子,它没有显示实现比较器的确切语法.

html看起来像这样:

<div>Selected: <span>{{selected}}</span></div>
    <div><input type="text" ng-model="selected" typeahead="name for name in states | filter:selected"></div>

基本的javascript看起来像这样

angular.module('firstChar', ['ui.bootstrap']);

    function TypeaheadCtrl($scope) {
        $scope.selected = undefined;
        $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', …

我在我的项目中使用Angular-ui/bootstrap模式.

这是我的模态:

$scope.toggleModal = function () {
    $scope.theModal = $modal.open({
        animation: true,
        templateUrl: 'pages/templates/modal.html',
        size: "sm",
        scope: $scope
    });
}

可以通过单击ESC按钮或单击模态区域外部来关闭模态.有没有办法在发生这种情况时运行一个函数？我不太清楚如何抓住那种结束.

我知道我可以通过这样的方式手动解除模态ng-click="closeModal()":

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

如果有人可以提供帮助,我们将不胜感激.