Javascript 角度指令+$观察

我似乎误解了$observe的工作原理。来自以下示例（）

HTML

JS

角度模块（'记录'，[]） .控制器（“IndexController”，功能（$scope） { console.log（'controller called'） $scope.handleClick=function（） { log（'handleClick-called'）； $scope.RecordAddress='0rtmp://thisIsAnAddress'; $scope.FlashVars='userid=SomeId&filename=http://localhost/Content/ThisIsAnAddress/player.swf&mediaFormat=_video.mp4&mediaServerAddress=rtmp://ThisIsAnAddress&culture=en-GB' $scope.src=$scope.RecordAddress+'`+$scope.FlashVars； } }) .directive（'record'，function（$location）{ 返回{ 限制：'E'， 范围：{ 当前：'=当前' }, 链接：函数（$scope，element，attr）{ log（'record指令-called'）； 控制台日志（attr）； 属性$observe（'src'，函数（值） { log（'record observe callback called！'）； console.log（'值为：'+值）； if（value&&value！='recordValues'） { var values=value.split（'`'）； console.log（'视频值：'） console.log（值）； html（“”）； } 其他的 { html（“请稍候”） } } ); } } });

---

我希望在单击按钮时呈现“对象”，而不是在设置未就绪时显示“请稍候”。但是，当“src”属性似乎已更新时，不会调用它。有人能给我解释一下为什么这个例子不起作用吗？

我认为您误用了$observe函数，尽管我可能无法完全理解您的意图。我认为更好的方法是在控制器内的

$scope

上设置适当的

src

值，然后使用

$watch

检测该值的变化。以下是我建议您这样做的方式：

在控制器中：

$scope.handleClick = function(){
    console.log('handleClick - called');
    $scope.RecordAddress = 'rtmp://thisIsAnAddress';
    $scope.FlashVars = 'userid=SomeId&filena...';

    //Now set the src on the scope as you already had:
    $scope.source = $scope.RecordAddress+ '`' + $scope.FlashVars;
}

在html视图中：

<!-- remove the binding braces so you're just passing a regular attribute -->
<record src="source"></record>

然后您将与您的指令分开绑定，如下所示：

function update(addr, flashVars){ ... }

scope.$eval(addrs.address, function(value){ ... });
scope.$eval(addrs.flashVars, function(value){ ... });

scope.$watch(addrs.address, ...);
scope.$watch(addrs.flashVars, ...);

---

这将使您不必拆分指令中的值。

我认为您误用了$observe函数，尽管我可能无法完全理解您要做的事情。我认为更好的方法是在控制器内的

$scope

上设置适当的

src

值，然后使用

$watch

检测该值的变化。以下是我建议您这样做的方式：

在控制器中：

$scope.handleClick = function(){
    console.log('handleClick - called');
    $scope.RecordAddress = 'rtmp://thisIsAnAddress';
    $scope.FlashVars = 'userid=SomeId&filena...';

    //Now set the src on the scope as you already had:
    $scope.source = $scope.RecordAddress+ '`' + $scope.FlashVars;
}

在html视图中：

<!-- remove the binding braces so you're just passing a regular attribute -->
<record src="source"></record>

然后您将与您的指令分开绑定，如下所示：

function update(addr, flashVars){ ... }

scope.$eval(addrs.address, function(value){ ... });
scope.$eval(addrs.flashVars, function(value){ ... });

scope.$watch(addrs.address, ...);
scope.$watch(addrs.flashVars, ...);

---

这将使您不必拆分指令中的值。

我认为您可以同时执行一些操作，这通常会带来有趣的调试。我想$watch可能对你更合适。而且，使用

element.html（）

调用会覆盖您试图查看的html中的变量

我已经做了一些更改（都包含在您的指令中），下面有一些工作代码（我在其中添加了一个模板来放置您的消息，当然还有很多其他的方法来做同样的事情）

指令（'record'，函数（$location，$sce）{ 返回{ 限制：'E'， 模板：“”， 链接：函数（$scope，element，attr）{ log（'record指令-called'）； 控制台日志（attr）； $scope.$watch（'src'，函数（值） { log（'record observe callback called！'）； console.log（'值为：'+值）； if（value&&value！='recordValues'） { var values=value.split（'`'）； console.log（'视频值：'） console.log（值）； $scope.message=''； $scope.trustedMsg=$sce.trustAsHtml（$scope.message）； } 其他的 { $scope.message=“请稍候”； $scope.trustedMsg=$sce.trustAsHtml（$scope.message）； } } ); } } }); 此外，如果您更喜欢使用attr.$observe调用，则可以将html更改为：

<record src='{{src}}'></record> 

致：

---

编辑：我更新（并测试）了代码，所以消息现在支持html，就像您的代码一样。（）

我认为您可以同时进行一些事情，这会使调试变得有趣。我想$watch可能对你更合适。而且，使用

element.html（）

调用会覆盖您试图查看的html中的变量

我已经做了一些更改（都包含在您的指令中），下面有一些工作代码（我在其中添加了一个模板来放置您的消息，当然还有很多其他的方法来做同样的事情）

指令（'record'，函数（$location，$sce）{ 返回{ 限制：'E'， 模板：“”， 链接：函数（$scope，element，attr）{ log（'record指令-called'）； 有限公司

directive('record', function ($location,$sce) {
        return {
            restrict: 'E',
            template: '<div ng-bind-html="trustedMsg"></div>',
            link: function ($scope, element, attr) {
                console.log('record directive - called');
                console.log(attr);

                $scope.$watch('src', function(value)
                    {
                        console.log('record observe callback called!');
                        console.log('The value is: '+ value);
                        if(value && value !='recordValues')
                        {
                            var values = value.split('`');
                            console.log('video values:')
                            console.log(values);
                            $scope.message='<object position="relative" width="519px" height="520px" data="'+values[0]+'" type="application/x-shockwave-flash"><param name="FlashVars" value="'+values[1]+'" /><param name="AllowScriptAccess" value="always" /></object>';
                            $scope.trustedMsg = $sce.trustAsHtml($scope.message);
                        }
                        else
                        {
                            $scope.message="<div>Please wait</div>";
                            $scope.trustedMsg = $sce.trustAsHtml($scope.message);
                        }
                    }
                );
            }
        }
    });

<record src='{{src}}'></record> 

<record src='src'></record>

scope: {
    src: '@src'
}

$attrs.$observe('src', function(value) {
  //some action
});