Qui*_*ome 1 javascript angularjs
我似乎误解了 $observe 的工作原理。从以下示例（plunker 链接）。
HTML
<html ng-app="record">
<head>
<script data-require="angular.js@*" data-semver="1.2.0-rc2" src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="IndexController">
<input type="text" value="{{src}}"/>
<input type="text" value="{{RecordAddress}}"/>
<input type="text" value="{{FlashVars}}"/>
<input type="button" ng-click="handleClick()" value="click me"/>
<record src="{{src}}"></record>
</body>
</html>
JS
angular.module('record',[])
.controller("IndexController", function($scope)
{
console.log('controller called')
$scope.handleClick = function()
{
console.log('handleClick - called');
$scope.RecordAddress = 'rtmp://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) {
return {
restrict: 'E',
scope: {
current: '=current'
},
link: function ($scope, element, attr) {
console.log('record directive - called');
console.log(attr);
attr.$observe('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);
element.html('<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>');
}
else
{
element.html("<div>Please wait</div>")
}
}
);
}
}
});
我希望在单击按钮时呈现“对象”，而不是在设置未准备好时应出现的“请稍候”。然而，当“src”属性似乎更新时，它不会被调用。有人可以向我解释为什么这个例子不起作用吗？
对于具有独立作用域的指令，您应用指令的元素不会继承父级的作用域。所以你不会{{src}}在那里看到任何变量——它总是空的。
您可以通过两种方式使用具有隔离作用域的指令的属性与外部世界进行通信：
src="{{$parent.src}}"但它有点hackishscope: {
src: '@src'
}
然后以下代码将起作用：
$attrs.$observe('src', function(value) {
//some action
});
| 归档时间： |
|
| 查看次数： |
11276 次 |
| 最近记录： |