Question

我逐渐掌握Angular指令并且到目前为止，已经使用创建服务作为控制器之间的中介。

我只是想知道，在指令（和链接函数）的上下文中是否可以让控制器访问来自链接函数的变量？（没有服务或全局变量）。

module.exports = function() {
    return {
      restrict: 'A',
      templateUrl: 'partials/collection',
      link: function(scope, element, attrs) {
        var name = attrs.collectionName;
        // from here
      },
      controller: function($scope, socket) {
        $scope.models = [];
        // to here
        socket.on('ready', function() {
          socket.emit(name + '/get');
        });

      }
    }  
  };

我希望我的控制器中可以使用collection-name属性的值，以便我可以进行适当的套接字调用。有什么想法吗？

Answer 1

您可以在控制器上添加方法并从链接功能中调用它。

controller: function($scope, socket) {
   this.setSocket = function(name){
       {...}
   }
}

在链接上：

link: function(scope, element, attrs, controller){
    var name = attrs.collectionName; 
    controller.setSocket(name);
}

Answer 2

有几种方法可以做你想做的事情

只需将所有内容都放在链接功能中即可。您可以在示波器上设置函数和变量，就像放入控制器一样。
在设置范围变量或函数方面，只需将所有内容放入控制器中即可。它注入$attrs，其中包含规范化的属性值，因此您可以在需要时访问这些属性。

据我所知，在大多数情况下，在范围内分配变量或函数时没有任何区别。两者之间的主要区别在于，如果您想为指令提供公共API，那么其他指令可以通过require与它通信，那么您必须在控制器中使用this.something。

Answer 3

他们共享相同的范围，所以这应该有用。

module.exports = function() {
    return {
      restrict: 'A',
      templateUrl: 'partials/collection',
      link: function(scope, element, attrs) {
        scope.name = attrs.collectionName;
        // from here
      },
      controller: function($scope, socket) {
        $scope.models = [];
        // to here
        socket.on('ready', function() {
          socket.emit($scope.name + '/get');
        });

      }
    }  
  };

Answer 4

可能有更好的方法，但我设法通过更改我的控制器函数依赖项来包含$ element参数来解决问题。然后只使用jqLite来获取相关属性的值。

controller: function($scope, $element, socket) {
   var name = $element.attr('collection-name');
}

它不是非常优雅，但它有效。

Angular Directives：链接到没有服务的控制器

4 个答案: