Question

我一起使用angularjs和聚合物，因为聚合物没有足够的材料设计ui元素，而angularjs有一个材料设计项目（https://material.angularjs.org），以实现材料设计系统。

HTML（ng-app="list" ng-controller="showTasks"）：

<md-content class="md-padding">
    <md-list>
        <md-item ng-repeat="task in tasks">
            <md-item-content>
                <div class="md-tile-left">
                    <paper-icon-button icon="assignment"></paper-icon-button>
                </div>
                <div class="md-tile-content">
                    <h3>{{task.title}}</h3>
                    <h4><strong>Due: </strong>{{task.due}}</h4>
                    <p>
                        <strong>Subjects: </strong>{{task.subjects}}
                    </p>
                </div>
                <paper-ripple class="recenteringTouch" core-transitionend="" fit></paper-ripple>
            </md-item-content>
        </md-item>
    </md-list>
</md-content>

脚本：

<script>
var app = angular.module('list', ['ngMaterial']);
app.controller('showTasks', ['$scope', '$http', function($scope, $http) {
    $scope.tasks = [];
    $http.post('/getAllTasks').success(function(response) {
        if (response.ok == 1) {
            $scope.tasks = response.result;
        }
    });
}]);
</script>

paper-ripple元素有一个事件core-transitionend。通过设置属性core-transitioned={{event-handler}}并注册处理程序Polymer('element-name', {event-handler: function() {}})，可以在polymer-element中使用它。

但是这里angularjs将解析{{}}语句，我无法注册paper-ripple，因为它已经注册。

那我怎么能抓住这个事件呢？

Answer 1

如果要阻止角度解析{{}}语句，请尝试使用{{'{{}}'}}。这可能就是您需要从聚合物中获得所需的一切。

Answer 2

这里有一些尝试：

<paper-ripple class="recenteringTouch" 
    core-transitionend="{{'{{event-handler}}'}}"
    fit>
</paper-ripple>

Answer 3

好吧，我明白了。

方法1：

使用directive，并使用link函数：

element.on('click', function() {
    element.on('core-transitionend', function() {
        // method 1 processing
    });
});

方法2：

<paper-ripple class="recenteringTouch" ng-click="rippleClicked($event)" fit></paper-ripple>

$scope.rippleClicked = function($event) {
    angular.element($event.target).on('core-transitionend', function() {
        // method 2 processing
    });
}

但这两种方法并不相同。对于方法1，当您单击元素时，按住鼠标并将其释放到元素外部，method 1 processing将不会触发（我不知道为什么，它似乎是click事件未被触发），而方法2将。

如何在Angular应用程序中捕获Polymer事件？

3 个答案:

方法1：

方法2：