我对角度很陌生,所以请原谅我的不理解。
我有一个名为"可拖动"的指令,我希望能够跟踪 x 的位置并在控制器中对其执行一些逻辑。当用户将元素(简笔画)拖到右侧时,其他简笔画应直接出现在其后面。控制器应该知道 x 位置,并根据它的位置,增加一个计数器,该计数器将指示可拖动元素后面出现多少个简笔画。
此代码当前不起作用,因为控制器没有收到 x 的值。
我的指令:
app.directive('draggable', function() {
return {
restrict: 'A',
scope: "=x",
link: function (scope, element, attrs) {
$(element).draggable({
containment: "parent",
axis: "x",
drag: function(){
scope.x = $(this).offset().left;
}
});
}
};
});
我的控制器:
app.controller("main-controller", function($scope) {
$scope.range = function(n) {
return new Array(figures);
};
$scope.$watch("x", function(){
console.log($scope.x);
figures = x / (stick_figure_height)
});
});
我的网页:
<div class="human-slider" ng-controller="main-controller">
<div draggable class="human-draggable">
<img src="images/stickfigure.png"/>
</div>
<div ng-repeat="i in range()">
<img src="images/stickfigure.png"/>
</div>
</div>
控制器没有从可拖动指令中获取 x 的更新值的原因是 x 的值正在更新。X 在 angularJS 库(拖动事件处理程序)之外的方法中创建的轮次中更新。此问题的解决方案是使用 $.apply 来更新绑定。
更新后的代码:
// Create our angular app
var app = angular.module('celgeneApp',[]);
// Main controller
app.controller("main-controller", function($scope) {
$scope.x = 0;
$scope.figures = 0;
$scope.range = function(n) {
return new Array($scope.figures);
};
$scope.$watch('x', function(){console.log($scope.x);});
});
// Draggable directive
app.directive('draggable', function() {
return {
restrict: 'A',
scope: false,
link: function (scope, element, attrs) {
$(element).draggable({
containment: "parent",
axis: "x",
drag: function(){
// Need to use $apply since scope.x is updated
// in a turn outside a method in the AngularJS library.
scope.$apply(function(){scope.x = element.offset().left;});
}
});
}
};
});
您可以通过服务在指令和控制器之间进行通信。指令还可以通过参数访问控制器的作用域变量。您可以根据需要以不同的方式访问变量:
- 作为带有 @ 前缀的文本
- 与 & 前缀进行单向绑定
- 使用带有 = 前缀的双托架绑定
查看这篇关于指令的优秀文章,尤其是范围部分
看看我做的这个指令,它只是jQuery的可拖动的包装器,就像你的一样,也许你可以得到一些想法:
角度可拖动
检查我的这个,了解父控制器和指令如何传达:)
http://plnkr.co/edit/GZqBDEojX6N87kXiYUIF?p=preview plnkr