封装了指令中的链接和控制器

Encapsulated Link and Controller in Directive

本文关键字：链接 控制器 指令 封装      更新时间：2023-09-26

我不想在一个单独的、简单的对象中定义一个灵活的angular指令的属性。

角: 

contentFactory.directive("listViewDir", function ($compile) {
return {
    restrict: "E",
    scope: {
        datasource: '=',
        config: '='
    },
    controller: function ($scope) {
        return $scope.config.controller($scope);
    },
    link: 
        return $scope.config.link(scope, element, attrs);
    }
}

});

Own Configuration Object:

contentFactory.controller("indexCtrl", function ($scope) {
$scope.config = oLiftTabs;})
var configurations = [{
    controller: function ($scope) {
        $scope.ButtonClicked = function () {
            alert('Button wurde geklickt!');
        }
        return $scope;
    },
    link: function (scope, element, attrs){
        var template = "... myTemplate ..";
        element.html(template);
        $compile(element.contents())(scope);
    },
}]

虽然我对控制器的解决方案工作得很好，但它不适用于链接。有什么更合适的方法吗?我可以实现在我的封装方法访问服务(如$compile)没有声明它在指令声明?

这就是你想要达到的效果吗?你没有说清楚你希望这个对象驻留在哪里，所以我假设你希望它是父控制器。这感觉不像是一个好主意，但如果不了解更多关于您的用例，很难说。

演示

<body ng-controller="MainCtrl">
    <list-view-dir config="config"></list-view-dir>
</body>

js 

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $compile) {

  $scope.config = {
    controller: function ($scope) {
        $scope.ButtonClicked = function () {
            alert('Button wurde geklickt!');
        }
        return $scope;
    },
    link: function (scope, element, attrs){
        var template = '<button ng-click="ButtonClicked()" > Alert</button>';
        element.html(template);
        $compile(element.contents())(scope); 
    },
  };

});

app.directive("listViewDir", function(){
  return { 
      restrict: "E",
      scope: {
          datasource: '=',
          config: '='
      },
      controller: function ($scope) {
        return $scope.config.controller($scope);
      },
      link: function(scope, element, attrs){
          return scope.config.link(scope, element, attrs);
      }
  };
});

从你的评论听起来你需要使用工厂。也许是这样的?它看起来很丑，但它可能就是你想要的。

以及接下来

var app = angular.module('plunker', []);
app.factory('directiveConfigurations', function($compile){
  var configurations = {
    'listViewDir': {
      controller: function ($scope) {
          $scope.ButtonClicked = function(){
              alert('Button wurde geklickt!');
          };
          return $scope;
      },
      link: function (scope, element, attrs){
          var template = '<button ng-click="ButtonClicked()" > Alert</button>';
          element.html(template);
          $compile(element.contents())(scope);
      }
    }
  };

  return {
    get: get
  };
  ////////////////////////
  function get(key){
    return configurations[key];
  }
});
app.controller('MainCtrl', function($scope, directiveConfigurations) {
  $scope.config = directiveConfigurations.get('listViewDir');
});

app.directive("listViewDir", function(){
  return { 
      restrict: "E",
      scope: {
          datasource: '=',
          config: '='
      },
      controller: function ($scope) {
        return $scope.config.controller($scope);
      },
      link: function(scope, element, attrs){
          return scope.config.link(scope, element, attrs);
      }
  };
});
相关文章：