小编Mar*_* Ni的帖子
AngularJS指令:更改未在UI中反映的$范围
我正在尝试使用AngularJS制作一些自定义元素并将一些事件绑定到它,然后我注意到$ scope.var在绑定函数中使用时不会更新UI.
以下是描述问题的简化示例:
HTML:
<!doctype html>
<html ng-app="test">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="Ctrl2">
<span>{{result}}</span>
<br />
<button ng-click="a()">A</button>
<button my-button>B</button>
</div>
</body>
</html>
JS:
function Ctrl2($scope) {
$scope.result = 'Click Button to change this string';
$scope.a = function (e) {
$scope.result = 'A';
}
$scope.b = function (e) {
$scope.result = 'B';
}
}
var mod = angular.module('test', []);
mod.directive('myButton', function () {
return function (scope, element, attrs) {
//change scope.result from here works
//But not …58
推荐指数
推荐指数
1
解决办法
解决办法
7万
查看次数
查看次数
CSS3转换:rotate()和rotateY()不能一起工作
我有一个简单的div,我想先将它旋转-35度,然后让它围绕y轴旋转.
然而通过使用transform: rotate(-35deg) rotateY(180deg);,我真正得到这样的:
y轴与div一起旋转,使我的尝试失败.
所以问题是,有没有办法transform-origin在旋转元素后重置y轴的角度(可能使用额外的父元素和？),以获得我想要的结果？
7
推荐指数
推荐指数
1
解决办法
解决办法
3386
查看次数
查看次数
如何使用SASS动态生成CSS3关键帧步骤？
假设我有一个关键帧动画,top每步有100步,增加1像素.使用程序生成这样的css是合乎逻辑的.
@keyframes animation
{
0% {top:0px;}
1% {top:1px;}
2% {top:2px;}
...
99% {top:99px;}
100% {top:100px;}
}
虽然这可以在JS中轻松完成,但我想知道是否有办法在SASS中执行此操作.
我现在遇到的主要问题是我找不到动态生成步骤选择器的方法(1%,2%,3%等).
我尝试过#{string}语法,但如果在百分比选择器中使用它会产生无效的语法错误,例如:
$num: 100;
@keyframes animation
{
#{num}% {top:0px;}
}
任何关于如何正确地做到这一点的想法将不胜感激.
5
推荐指数
推荐指数
1
解决办法
解决办法
2073
查看次数
查看次数
AngularJS:双向绑定视频的currentTime with directive
我一直试图找出一个简单的指令模式来控制html5视频/ youtube视频.
我想用"Angular方式"来做,因此将视频的属性绑定到对象模型.但是,当处理视频的"currentTime"属性时,我遇到了一些问题,因为它会不断更新.
这是我到目前为止所得到的:
HTML控件:
<!--range input that both show and control $scope.currentTime -->
<input type="range" min=0 max=60 ng-model="currentTime">
<!--bind main $scope.currentTime to someVideo directive's videoCurrentTime -->
<video some-video video-current-time="currentTime"> </video>
指示:
app.controller('MainCtrl', function ($scope) {
$scope.currentTime = 0;
})
app.directive('someVideo', function ($window) {
return{
scope: {
videoCurrentTime: "=videoCurrentTime"
},
controller: function ($scope, $element) {
$scope.onTimeUpdate = function () {
$scope.videoCurrentTime = $element[0].currentTime;
$scope.$apply();
}
},
link: function (scope, elm) {
scope.$watch('videoCurrentTime', function (newVar) {
elm[0].currentTime = newVar;
});
elm.bind('timeupdate', …5
推荐指数
推荐指数
1
解决办法
解决办法
4601
查看次数
查看次数