Angular指令范围eval未定义

时间:2015-06-02 13:20:41

标签: angularjs angularjs-directive angularjs-scope

我在我们的网站上使用Angular,并且很难让指令正常工作。我有一个指令,试图使用Flash和媒体播放器来显示通过动态构建对象标签并在正确的位置插入URL来选择的视频。

这是指令

    app.directive('movie', function() {
      var params = "&autoPlay=true&verbose=true&plugin_AdaptiveStreamingPlugin=http://D28C.wpc.azureedge.net/80D28C/amsplayer/assets/MSAdaptiveStreamingPlugin-v1.0.13-osmf2.0.swf&AdaptiveStreamingPlugin_retryLive=true&AdaptiveStreamingPlugin_retryInterval=10";

      return {
        restrict: 'E',

        link: function(scope, element, attrs) {
          var url = scope.$eval(attrs.src);

          element.replaceWith('<object width="640" height="400" id="flashPlayer" ' +
            'data="http://D28C.wpc.azureedge.net/80D28C/amsplayer/assets/StrobeMediaPlayback.2.0.swf" ' +
            'type="application/x-shockwave-flash"><param name="allowfullscreen" value="true"> ' +
            '<param name="wmode" value="direct"> ' +
            '<param name="flashvars" value="src=' + url + params + '">' +
            '</object>');
        }
      };
    });

这是html

 <div>
   <movie src="vm.video.fileUri" />
 </div>

在Chrome中,在调试时,指令中的这一行:

          var url = scope.$eval(attrs.src);

正确包含attrs.src的值 vm.video.fileUri 。 但是,当我执行该行时 - 该值未定义,而不是我们想要显示的视频的网址。

我尝试使用范围手动查找值。$ parent。$ eval在控制台窗口中 - 但找不到网址。我做错了什么???

我最终使用了 undefined 这个词,其中包含渲染的html中的所有对象参数

感谢

2 个答案:

答案 0 :(得分:0)

您可以尝试在指令中定义局部范围并获取其值吗?建议在创建自定义指令时在DDO上设置范围。这样我们就可以确保该指令不会干扰父作用域。

app.directive('movie', function() {
      var params = "&autoPlay=true&verbose=true&plugin_AdaptiveStreamingPlugin=http://D28C.wpc.azureedge.net/80D28C/amsplayer/assets/MSAdaptiveStreamingPlugin-v1.0.13-osmf2.0.swf&amp;AdaptiveStreamingPlugin_retryLive=true&AdaptiveStreamingPlugin_retryInterval=10";

      return {
        restrict: 'E',
        scope: {
          src: '='
        },
        link: function(scope, element, attrs) {
          var url = scope.src;

          element.replaceWith('<object width="640" height="400" id="flashPlayer" ' +
            'data="http://D28C.wpc.azureedge.net/80D28C/amsplayer/assets/StrobeMediaPlayback.2.0.swf" ' +
            'type="application/x-shockwave-flash"><param name="allowfullscreen" value="true"> ' +
            '<param name="wmode" value="direct"> ' +
            '<param name="flashvars" value="src=' + url + params + '">' +
            '</object>');
        }
      };
    });

答案 1 :(得分:0)

对于有同样问题的人,我在这里找到了一些答案:

Embedding with 'object' tag not working on dynamic data

希望它有所帮助。