Question

我们的用户界面很小。当我们第一次加载页面时，一切都完美无缺。当我们切换 - 在我们的情况下餐馆 - 模型更新，我们无法聚焦输入字段。知道这里发生了什么吗？

我们有一个视频，其中有一些关于发生了什么的演示：
https://youtu.be/5IBwtBOZmzs

FILE：restaurant.config.js

function RestaurantConfig($stateProvider) {
'ngInject';

$stateProvider
    .state('app.restaurant', {
        abstract:true,
        url: '/restaurants/:id',
        controller: 'RestaurantCtrl',
        controllerAs: '$ctrl',
        templateUrl: 'restaurant/views/index.html',
        resolve: {
            restaurant: function (Restaurants, $stateParams) {
                return Restaurants.get($stateParams.id);
            },
            restaurants: function (Restaurants) {
                return Restaurants.getAll()
            }
        }
    })
    .state('app.restaurant.dashboard', {
        url: '/dashboard',
        controller: 'DashboardCtrl',
        controllerAs: '$ctrl',
        templateUrl: 'restaurant/views/dashboard.html',
        title: 'Restaurant'
    })
    .state('app.restaurant.settings', {
        url: '/settings',
        controller: 'SettingsCtrl',
        controllerAs: '$ctrl',
        templateUrl: 'restaurant/views/settings.html',
        title: 'Instellingen'
    })
    .state('app.restaurant.edit', {
        url: '/edit',
        controller: 'EditCtrl',
        controllerAs: '$ctrl',
        templateUrl: 'restaurant/views/edit.html',
        title: 'Bewerken'
    });
};

export default RestaurantConfig;

FILE：restaurant.controller.js

class RestaurantCtrl {
    constructor(restaurant, restaurants, $state) {
        'ngInject';

        this.restaurants = restaurants;
        this.restaurant = restaurant;
        this._$state = $state;
    }

    restaurantChange() {
        this._$state.go('app.restaurant.dashboard', {id: this.restaurant.id});
    }
}


export default RestaurantCtrl;

FILE：settings.controller.js

class SettingsCtrl {
constructor(restaurant, restaurants, Restaurants) {
    'ngInject';

    this.restaurants = restaurants;
    this.restaurant = restaurant;
    this._Restaurants = Restaurants;

    this.restaurant.order_interval = this.convertTime(this.restaurant.order_interval);

    this.restaurant.take_away_hour.from = this.convertTime(this.restaurant.take_away_hour.from);
    this.restaurant.take_away_hour.to = this.convertTime(this.restaurant.take_away_hour.to);

    this.restaurant.shopping_hour.from = this.convertTime(this.restaurant.shopping_hour.from);
    this.restaurant.shopping_hour.to = this.convertTime(this.restaurant.shopping_hour.to);
}

convertTime(input) {
    var output = input.split(':')
    var date = new Date();

    date.setHours(output[0]);
    date.setMinutes(output[1]);
    date.setSeconds(0);
    date.setMilliseconds(0);

    return date;
}

saveShoppingHour() {
    this._Restaurants.saveShoppingHour(this.restaurant).then(
        (res) => {
            this.success = res;
        },
        (err) => {
            this.errors = err.data.errors;
        }
    );
}

saveTakeAwayHour() {
    this._Restaurants.saveShoppingHour(this.restaurant).then(
        (res) => {
            this.success = res;
        },
        (err) => {
            this.errors = err.data.errors;
        }
    );
}

saveInterval() {
    this._Restaurants.saveInterval(this.restaurant).then(
        (res) => {
            this.success = res;
        },
        (err) => {
            this.errors = err.data.errors;
        }
    );
}
}

export default SettingsCtrl;

奇怪的是，当你刷新时，它有效。有人可以帮助我们吗？

德棉

Answer 1

所以，我们也使用https://angular-ui.github.io/bootstrap/

当您点击下拉菜单时，它们会保持焦点。解决方案是删除下拉列表，并编写我们自己的实现。

要查找关注的元素： document.activeElement

Angular.js在状态改变后无法聚焦

1 个答案: