0

我正在使用 Ratchet 和 Angular 构建一个移动应用程序，并且开发速度非常快。

但是，我在使用切换时遇到了很多麻烦。当Ratchet 处于活动div状态时，它会在其中添加一个“活动”类：

<div class="toggle">
   <div class="toggle-handle"></div>
</div>

然而，这是在 Angular 之外完成的，所以我尝试创建一个指令来 $watch 这个更改没有成功。另外，我还没有测试过，但是如果在 Angular 之外添加了一个类，那么 ngClass 可能不会更新模型。

Ratchet 的 toggle.js 有一个事件监听器，当状态改变时触发，但同样，这不仅是 angular 之外的 javascript，而且我也没有使用 jQuery，所以我不知道如何从加载的视图中添加这个回调在 ng-view 中，并从这样的回调中更改控制器范围。

任何帮助表示赞赏。

4

1 回答 1

0

最终，我用一个指令解决了我的问题，不知道@kindasimple 建议的棘轮处理程序：

HTML：

<div id="variable" class="toggle" my-toggle>
    <div class="toggle-handle"></div>
</div>

JS：

app.directive('myToggle', [function() {

    function link(scope, element, attrs) {
        scope.$watch(function() {
            return element.hasClass('active');
        }, function(value) {
            var id = element.attr('id');
            scope.save(id, value);
        });
    }

    return {
        restrict: 'A',
        scope: false,
        link: link
    };
}]);

Ratchetactive在点击和触摸上切换一个类，所以我的主要想法是 $watch() 改变。我的指令在其 on 上不需要一个独立的范围，我只希望每个切换都更新其控制器范围内的变量，因此scope: false.

在我的具体代码中，scope.save()是一个保存变量的控制器函数，所以我可以使用它和元素id来保存它的状态。但是之前$scope.$apply()在控制器内部使用的解决方案是强制 Angular 运行一个$digest()循环并调用scope.$watch()指令。

于 2015-01-12T23:33:53.507 回答