0

我的场景，如这个jsfiddle所示：我有一个指令，它创建一个空的 iframe 并附加一个监听点击的加载事件。在控制器中单击调用scope.emitClick()，然后使用 socket.io 向后端服务器发送消息。尽管我不确定这是最好的方法，但它确实有效。

碰巧，我需要从后端服务器接收通知：控制器使用 socket.io 来侦听消息，并且在收到特定消息后，它应该能够更改指令中创建的 iframe 的内容。

有没有办法从控制器调用指令中定义的方法？有没有合适的方法来做类似于我想要完成的事情？

html:

<div ng-controller="SimulationController">
    <virtual-page id="testPage"/>
</div>

js：

var myModule = angular.module('myModule', []);

myModule.controller('SimulationController', function ($scope, socket) {    
    socket.on('update', function (data) {
        //do something to iframe contents
    });

    $scope.emitClick = function (page, target) {
        //socket.emit("click", { page: page, target: target });
        console.log("clicked");
    }
});

myModule.directive('virtualPage', function () {
    var linkFn = function(scope, element, attrs) {       
        element.load(function () {
            console.log(attrs.id + ": contents loaded");

            jQuery(this).contents().off()
            .on("click", function (event) {
                console.log('>> clicked: ' + attrs.id + " - " + event.target);
                scope.emitClick(attrs.id, event.target);
                return false;
            })
        });

        element[0].contentWindow.contents = "<html><head></head><body>test...</body></html>";
        element[0].src = 'javascript:window["contents"]';
    };
    return {
        restrict: 'E',
        template: '<iframe src="about:blank"></iframe>',
        replace: true,
        link : linkFn
    };
});

myModule.factory('socket', function () {
    return {
      on: function (eventName, callback) {
        //fake
      },
      emit: function (eventName, data, callback) {
        //fake
      }
    };
  });
4

1 回答 1

2

在控制器中修改 DOM 不是一种角度方式恕我直言。我对这类问题的处理方法是：

在指令的链接函数中：

var linkFn = function(scope, element, attrs) {
    ...
    scope.$watch('someData', function(newData) {
        // change element according to the new data
    });
};

在控制器中：

socket.on('update', function (data) {
    $scope.someData = newData; // Update data, so directive can take action against it
});
于 2013-07-08T17:44:10.480 回答