小编Bat*_*man的帖子

解除时显示Bootstrap模态验证

我在AngularJS中有一个表单视图,我使用Angular-ui中的一个模态来显示我的表单.功能方面,一切都很好,但是,当我关闭表单时,如果表单无效,则显示验证弹出窗口.

这就是它的样子:

在此输入图像描述

当表单打开时,弹出窗口根本不显示,但只有当我单击取消并且它开始消失时才会显示.

HMTL:

<form name='newGroupForm'>
    <div class="modal-body">
            <label for="groupName">Group Name:
                <input id="groupName" type="text" ng-model='newGroup.name' required>
            </label>
            <br/>
            <label for="groupDesc">Group Description:
                <input id="groupDesc" type="text" ng-model='newGroup.desc'>
            </label>
            <br/>
            <label for="groupOwner">Group Name:
                <select id="groupOwner" type="text"  ></select>
            </label>
    </div>
    <div class="modal-footer">
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        <button class="btn btn-primary" type="button" ng-click="submit()" ng-disabled="newGroupForm.$invalid">Create</button>
    </div>
</form>
Run Code Online (Sandbox Code Playgroud)

模态控制器:

spApp.controller('newGroupCtrl', 
    function newGroupCtrl($scope, $modalInstance, groupService){
        $scope.newGroup = {
            name:null,
            desc: null
        };

        $scope.submit = function(){
            $modalInstance.close($scope.newGroup);
        }
        $scope.cancel = function (){
            $modalInstance.dismiss('Cancelled group creation');
        };
    }
);
Run Code Online (Sandbox Code Playgroud)

validation twitter-bootstrap angularjs angular-ui angular-ui-bootstrap

5
推荐指数
1
解决办法
6235
查看次数

在Angular中使用$ scope属性的最佳实践

我正在开发一个应用程序,我正在努力确保我$scope正确使用它.

我观看了最佳实践视频和Miško有点说我们不应该$scope在这里操纵属性.

我一直在创建像这样的变量:

    $scope.groups = groupService.getGroups()
    $scope.users = userService.getUsers();
    $scope.selectedUser = false;
Run Code Online (Sandbox Code Playgroud)

我应该重新编写我的应用程序来使用这样的东西:

    $scope.model = {
        selectedAvailableGroups: [],
        selectedAssignedGroups: [],
        allGroups: groupService.getGroups(),
        allUsers: userService.getUsers(),
        selectedUser: false
    }
Run Code Online (Sandbox Code Playgroud)

我问的原因是我很少看到使用$scope.model方式的示例或应用程序,它通常只是声明的属性$scope.

javascript angularjs

5
推荐指数
1
解决办法
826
查看次数

Lodash 去抖动异步/等待

我正在尝试在进行 api 调用之前向我的应用程序添加去抖动。但是,当我引入 debouce 时,似乎忽略了我的 await 并且由于缺少值而调用函数

export default class App extends Component {
  state = {
    search: "Cats",
    results: []
  };

  async search(text) {
    const giphy = {
      baseURL: "https://api.giphy.com/v1/gifs/search",
      apiKey: "0UTRbFtkMxAplrohufYco5IY74U8hOes",
      tag: text
    };

    let giphyURL = encodeURI(
      giphy.baseURL + "?api_key=" + giphy.apiKey + "&q=" + giphy.tag
    );

    let data = await fetch(giphyURL);
    return data.json();
  }

  async componentDidMount() {
    // get default search
    this.onSearch(this.state.text);
  }

  setSearch = e => {
    this.setState({ search: e.target.value });

    debounce(() => this.onSearch(this.state.search), 100); …
Run Code Online (Sandbox Code Playgroud)

javascript lodash reactjs debounce

5
推荐指数
1
解决办法
1万
查看次数

Apollo MockedProvider 未返回预期数据

我写了一个调用 apollo 的钩子useQuery。这很简单:

使用决策者:

import { useState } from 'react';
import { useQuery, gql } from '@apollo/client';

export const GET_DECIDER = gql`
  query GetDecider($name: [String]!) {
    deciders(names: $name) {
      decision
      name
      value
    }
  }
`;

export const useDecider = name => {
  const [enabled, setEnabled] = useState(false);

  useQuery(GET_DECIDER, {
    variables: {
      name
    },
    onCompleted: data => {
      const decision = data?.deciders[0]?.decision;
      setEnabled(decision);
    },

    onError: error => {
      return error;
    }
  });

  return {
    enabled
  };
};
Run Code Online (Sandbox Code Playgroud)

我现在正在尝试测试它,但MockedProvider …

javascript apollo reactjs react-apollo apollo-client

5
推荐指数
2
解决办法
7714
查看次数

IE8中的偶数和奇数选择器

我正在尝试突出每一个第二个li元素.它适用于其他浏览器,但IE不兼容.我尝试使用JQuery来解决问题,但我遇到了让它运行的问题.

现在我所拥有的是突出显示IE8或更低版本中的所有项目.

这是我的代码:

CSS

    .ms-quicklaunch-navmgr{
        overflow-y:scroll;
        height:650px;
    }
    .s4-ql li.static:nth-child(even){
        background:#CCC
    }
    body #s4-leftpanel{
        width:255px
    }
    .s4-ca{
        margin-left:255px
    }
    .even{
        background:#CCC
    }       
Run Code Online (Sandbox Code Playgroud)

JS

$(document).ready(function(){
    $('.s4-ql li.static:even').addClass('even');
});
Run Code Online (Sandbox Code Playgroud)

这是我尝试样式的HTML:

在此输入图像描述

html javascript css css3 internet-explorer-8

4
推荐指数
1
解决办法
346
查看次数

未捕获错误:[$ injector:modulerr]无法使用LABJS实例化模块

加载我的Angular应用程序时,我一直收到此错误.在Chrome中,一对夫妇刷新,我的应用程序将运行,但IE和FF是不行.

该错误将我链接到此错误页面,但我真的不明白它的含义.

我正在使用LabsJS加载我的应用程序,包括控制器和服务.

// spAppLoader.js

$LAB
    .script("../js/app.js").wait()
    .script("../js/controllers/userCtrl.js")
    .script("../js/controllers/groupCtrl.js")
    .script("../js/controllers/siteCtrl.js")
    .script("../js/services/userServices.js")
    .script("../js/services/groupServices.js")
    .script("../js/services/siteServices.js")
Run Code Online (Sandbox Code Playgroud)

标记:

<div id="mdContainer" ng-app="spApp" ng-cloak>
  ...
</div>
<script type="text/javascript" src="../js/spAppLoader.js"></script>
Run Code Online (Sandbox Code Playgroud)

我想发布更多的代码,但我不知道从哪里开始,而角度一切都在多个文件中.我通过github上传了它.

javascript labjs angularjs

4
推荐指数
1
解决办法
7264
查看次数

如何模拟和测试 Axios 拒绝的 Promise?

我创建了一个名为 API 的类,它是 Axios 的一个简单包装器

export class API {    
  static get = async (route: string, version: string = API_VERSION) => {
    try {
      return await axios.get(`${BASE_URL + version}${route}`);
    } catch (error) {
      throw error;
    }
  };
}
Run Code Online (Sandbox Code Playgroud)

我正在尝试测试 get 方法的 catch 分支:

我试过:

describe('API Throws Errors', () => {
  beforeEach(() => {
    // axios.get.mockImplementation(() => Promise.reject('rejected'));
    jest.mock('axios', () => ({
      get: jest.fn().mockReturnValue(Promise.reject('error'))
    }));
  });

  it('get fails', async () => {
    await expect(() => {
      API.get(GROUPS.url());
    }).rejects.toEqual('error');
  });

  afterEach(() => { …
Run Code Online (Sandbox Code Playgroud)

javascript jestjs axios

4
推荐指数
1
解决办法
1万
查看次数

/ user/auth/google_oauth2/callback中的JWT :: InvalidIatError无效的iat

当我尝试在本地使用Google oauth2登录时出现此错误.谷歌搜索错误并没有给我任何指示.在Heroku我没有任何问题

这是我对谷歌的omniauth控制器功能:

  def google_oauth2
      # You need to implement the method below in your model (e.g. app/models/user.rb)
      @user = User.from_omniauth(request.env["omniauth.auth"])

      if @user.persisted? # Check if the user exits
        sign_in_and_redirect @user, event: :authentication
        # flash[:notice] = I18n.t "devise.omniauth_callbacks.success", :kind => "Google"
      else
        session["devise.google_data"] = request.env["omniauth.auth"].except('extra')
        redirect_to new_user_registration_url
      end
  end
Run Code Online (Sandbox Code Playgroud)

这是服务器日志输出:

Started GET "/user/auth/google_oauth2" for 10.0.2.2 at 2015-10-04 17:11:23 -0400
Cannot render console from 10.0.2.2! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
I, [2015-10-04T17:11:23.278558 #8203]  INFO -- omniauth: (google_oauth2) Request phase initiated.


Started …
Run Code Online (Sandbox Code Playgroud)

ruby-on-rails devise omniauth google-oauth ruby-on-rails-4

3
推荐指数
2
解决办法
3448
查看次数

通过变量执行cmdlet?

我想使用一个if \ else语句来确定运行哪个cmdlet,同时为两个命令保持相同的参数:

例如我有这个电话:

    New-AzureRmResourceGroupDeployment `
        -ResourceGroupName $ResourceGroup `
        -TemplateFile $TemplateUri `
        -TemplateParameterFile $TemplateParamFile 
Run Code Online (Sandbox Code Playgroud)

但我想用变量来确定动词:

    $myVerb = if ($booleanTest) {"Test"} else {"New"}
    [$myVerb]-AzureRmResourceGroupDeployment `
         -ResourceGroupName $ResourceGroup `
         -TemplateFile $TemplateUri `
         -TemplateParameterFile $TemplateParamFile 
Run Code Online (Sandbox Code Playgroud)

或类似的东西:

    $command = if ($booleanTest) {"Test-AzureRmResourceGroupDeployment"} else {"New-AzureRmResourceGroupDeployment"}
    $command `
         -ResourceGroupName $ResourceGroup `
         -TemplateFile $TemplateUri `
         -TemplateParameterFile $TemplateParamFile 
Run Code Online (Sandbox Code Playgroud)

我尝试了这个$command版本,但它失败了:

在C:\ Users\Administrator\Dropbox\projects\deloitte\Suncore\Dev\scripts\az -d eploy.ps1:36 char:13 + -ResourceGroupName $ ResourceGroup + ~~~~~~~~~~~~~~~~~~ Unexpected token '-ResourceGroupName' in expression or statement. At C:\Users\Administrator\Dropbox\projects\deloitte\Suncore\Dev\scripts\az-d eploy.ps1:36 char:32 + -ResourceGroupName $ResourceGroup …

windows powershell cmdlets

3
推荐指数
1
解决办法
84
查看次数

Ag-Grid 单击单元格内的图标时防止 onRowClicked 事件

我有一个单元格渲染器,它返回行上的名称属性和对象:

const nameRenderer = ({ value, data }) => {
    const { id: queueId } = data;
    return (
      <Box>
        <div className="row-hidden-menu">
            <IconButton
              icon="menu"
              onClick={({ event }) => {
                event.preventDefault();
                event.stopPropagation();
                onMenuClick();
              }}
            />
        </div>
      </Box>
    );
  };
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

我遇到的问题是我有一个onRowClick函数,但我不希望当我单击nameRenderer. 现在,当菜单打开时,onRowClicked事件将导航到新页面。

javascript reactjs ag-grid ag-grid-react

3
推荐指数
1
解决办法
4866
查看次数