Question

我不想编写一个灵活的角度指令，它的属性在一个自己的简单对象中定义。

角：

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);
    }
}

}）;

拥有配置对象：

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）而不在指令声明中声明它吗？

Answer 1

这是你想要达到的目标吗？你没有说清楚你期望这个对象存在的位置，所以我假设你想要它是一个父控制器。这不是一个好主意，但是在不了解您的用例的情况下很难说。

DEMO

<强> HTML

<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);
      }

  };

});

<强>更新

您的评论听起来像是需要使用工厂。也许是这样的？感觉非常难看，但它可能是你正在寻找的东西。

DEMO2

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);
      }

  };

});

指令中的封装链路和控制器

1 个答案: