小编Jim*_*per的帖子

从AngularJS中没有隔离范围的指令调用控制器函数

我似乎无法在不使用隔离范围的情况下从指令中调用父作用域上的函数.我知道如果我使用隔离范围,我可以在隔离中使用"&"来访问父范围上的函数,但是在没有必要时使用隔离范围会产生后果.请考虑以下HTML:

<button ng-hide="hideButton()" confirm="Are you sure?" confirm-action="doIt()">Do It</button>

Run Code Online (Sandbox Code Playgroud)

在这个简单的例子中,我想显示一个JavaScript确认对话框,如果他们在确认对话框中单击"确定",则只调用doIt().使用隔离范围很简单.该指令看起来像这样:

.directive('confirm', function () {
    return {
        restrict: 'A',
        scope: {
            confirm: '@',
            confirmAction: '&'
        },
        link: function (scope, element, attrs) {
            element.bind('click', function (e) {
                if (confirm(scope.confirm)) {
                    scope.confirmAction();
                }
            });
        }
    };
})

Run Code Online (Sandbox Code Playgroud)

但问题是,因为我使用的是隔离范围,上面示例中的ng-hide不再针对父范围执行,而是在隔离范围内执行(因为在任何指令上使用隔离范围会导致该元素上的所有指令使用孤立的范围).这是上面例子的jsFiddle,其中ng-hide不起作用.(请注意,在此小提琴中,当您在输入框中键入"yes"时,该按钮应隐藏.)

替代方案是不使用隔离范围,这实际上是我真正想要的范围,因为不需要隔离此指令的范围.我唯一的问题是,如果我没有在隔离范围内传递它,如何在父范围上调用方法？

这是一个jsfiddle我不使用隔离范围,ng-hide工作正常,但是,当然,对confirmAction()的调用不起作用,我不知道如何使它工作.

请注意,我真正寻找的答案是如何在外部作用域上调用函数而不使用隔离的作用域.我不想以另一种方式使这个确认对话框工作,因为这个问题的关键是要弄清楚如何调用外部作用域,并且仍然能够使其他指令对父作用域起作用.

或者,如果其他指令仍然适用于父作用域,我有兴趣听到使用隔离作用域的解决方案,但我认为这不可行.

angularjs angularjs-directive angularjs-scope

Jim*_*per

2017 01-17

95
推荐指数

3
解决办法

9万
查看次数

移动设备上的Bootstrap字体缩放太小

我花了很多时间和基金会一起工作,而没有多少时间使用Bootstrap.我在Bootstrap中遇到了一个我不理解的响应问题,因为这似乎在Foundation中有效.问题是,虽然网格响应能力按预期工作,但我的字体缩小到很小,以至于在移动设备上几乎难以辨认.请注意,在我下面的示例中,我将字体大小设置为14px,但在移动设备上,这变得非常小.您可以点击Chrome开发工具中的移动按钮来查看此信息.

重现这个的html非常简单,这里有一个jsbin:http://jsbin.com/lumepumufu/1/

这是html:

<html>
  <head>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  </head>
  <body style="font-size:14px">
    <div class="container">
      <div class="row">
        <div class="col-lg-4">col-lg-4</div>
        <div class="col-lg-4">col-lg-4</div>
        <div class="col-lg-4">col-lg-4</div>
      </div>
    </div>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

html css twitter-bootstrap

Jim*_*per

lucky-day

35
推荐指数

2
解决办法

2万
查看次数

将路由添加到Vue.js cli 3.0应用程序

新的Vue.js 3.0插件架构很不错,但似乎缺少一个路由器插件.如果我在第一次创建项目时选择不安装路由(vue create my-project),我希望以后可以改变主意并添加类似的路由vue add @vue/router,但该插件似乎不存在.事后是否有办法从CLI添加路由？

vue.js vue-router vue-cli

Jim*_*per

lucky-day

16
推荐指数

1
解决办法

2万
查看次数

在以编程方式更改模型时,AngularJS自定义验证不会触发

我创建了一个自定义验证器,要求过去的日期.手动输入日期时,验证似乎很有效.但是,如果我输入以编程方式更改日期(直接更改模型而不是在字段中键入),则验证不会触发.

我相信我正在按照文档中的指示进行自定义验证指令. 这是一个说明问题的jsFiddle.在小提琴中,如果单击"以编程方式更改日期"按钮,则可以看到未显示验证错误(但如果您手动更改它则会显示).这是指令代码(也在小提琴中):

myApp.directive('pastDate', function() {
    return {
        restrict: 'A',
        require: '?ngModel',
        link: function (scope, element, attrs, ctrl) {
            ctrl.$parsers.unshift(function (viewValue) {
                var today = new Date();
                today = new Date(today.getFullYear(), today.getMonth(), today.getDate());

                if (new Date(viewValue) < today) {
                    ctrl.$setValidity('pastDate', true);
                    return viewValue;
                }
                ctrl.$setValidity('pastDate', false);
                return undefined;
            });
        }
    };
});

Run Code Online (Sandbox Code Playgroud)

angularjs

Jim*_*per

2017 10-11

15
推荐指数

2
解决办法

7511
查看次数

从Chrome文件系统播放视频无法在Android上运行

我正在尝试创建一个离线视频播放器,可以从我的网站下载视频内容,以便以后通过HTML5视频元素离线观看.以下代码适用于桌面Chrome,但不适用于移动设备(Nexus S智能手机,Nexus 7平板电脑4.1,因为只运行Chrome,这是文件系统API所必需的).我在桌面和移动设备上使用chrome支持的文件系统API.

我已经确认它正确地将文件存储在移动设备上,我可以正确地检索文件,但出于某种原因,从localsystem检索视频后,chrome不想播放视频.无论我使用html5视频元素还是直接导航到文件系统URL,都是如此.当我使用html5视频元素时,它返回错误media_err_not_supported.我已经确认,如果我在我的服务器上直接导航它,设备可以播放视频(没有先使用文件系统api存储它),因此问题不是编解码器或视频格式问题.在这两种情况下我也使用video/mp4 mime类型.

同样,这适用于桌面,但不适用于移动设备.有任何想法吗？

这是我们使用的代码:

<!DOCTYPE html >
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"> </script>
        <script type="text/javascript">
            var _fs;
            var filename = "test3.mp4";
            var diskSpaceRequired = 10 * 1024 * 1024;
            $(document).ready(function () {
                window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
                function onInitFs(fs) {
                    _fs = fs;
                    getVideo(fs);
                }

                if (!!window.requestFileSystem) {

                    window.webkitStorageInfo.requestQuota(
                        window.webkitStorageInfo.PERSISTENT,
                        diskSpaceRequired, // amount of bytes you need
                        function () { },
                        function () {}
                    );
                    window.requestFileSystem(window.PERSISTENT, diskSpaceRequired, onInitFs, function () { alert('error'); });
                } else {
                    alert('not …

Run Code Online (Sandbox Code Playgroud)

filesystems android google-chrome html5-video

Jim*_*per

lucky-day

6
推荐指数

1
解决办法

2464
查看次数

Airplay与自定义html5控件

有没有人知道是否有办法让Airplay在使用CUSTOM CONTROLS的html5视频上工作？这是重要的部分,我意识到如果你使用内置的html5控件,你可以只添加x-webkit-airplay ="allow"属性.但我的视频播放器使用自定义控件.

似乎Safari会将Airplay按钮放在内置的html5控件上,但如果我不使用内置控件,有没有办法做到这一点？这是我写的html5播放器的链接.请注意底部的控件是我自己的:

http://pluralsight.com/training/Player?author=keith-brown&name=aspdotnet-security&mode=live&clip=0&course=aspdotnet-security

谢谢!

safari html5 html5-video airplay

Jim*_*per

2017 05-03

6
推荐指数

1
解决办法

6157
查看次数

问题样式:Angular 2中的主机

[编辑以更好地描述问题]

我在将各种样式应用于:Angular 2中的主机时遇到了困难.下面简单的plunker演示了这个问题.起初我认为某些样式(如margin/padding)没有得到应用,但似乎问题是host元素的行为不像普通元素.请注意,我添加了边框和填充.边框看起来很奇怪,填充根本不会移动元素内部的内容(虽然它确实会影响边框的外观.这是我正在应用的样式:

:host {padding:10px; border:1px solid red;}

Run Code Online (Sandbox Code Playgroud)

渲染的代码如下所示:

<sample-component _nghost-cxm-2="">
  <div _ngcontent-cxm-2="">
    <h3 _ngcontent-cxm-2="">Sample Component</h3>
  </div>
</sample-component>

Run Code Online (Sandbox Code Playgroud)

我可以在开发工具中看到样式正在应用于<sample-component>元素,但这就是页面呈现的样子:

我希望边框将内容包装在组件内部,但它表现得很奇怪.这是一个样本plunker:https://plnkr.co/edit/k7LJcmVlhJINmakBJAau ？ p = preview

我错过了什么？

styling angular

Jim*_*per

2016 10-09

4
推荐指数

1
解决办法

1543
查看次数

Karma没有运行茉莉花规格

我正在建立一个新项目并试图让业力发挥作用.当我运行业力时,它会继续报告:

执行0 of 0 ERROR.

此时我的项目只包含几个js文件和一个test.js文件.这是我的karma.conf.js:

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],


    // list of files / patterns to load in the browser
    files: [
      {pattern: '../app/**/*.js', included: false},
      {pattern: '**/*.js', included: false}
    ],


    // list of files to exclude
    exclude: [],


    // preprocess matching files before serving them to the browser
    // …

Run Code Online (Sandbox Code Playgroud)

karma-runner karma-jasmine

Jim*_*per

2015 09-01

3
推荐指数

1
解决办法

5863
查看次数