Question

我正在尝试自动创建'loadPlugCtrl'的实例可能会使用指令，但它不起作用。你可以看到它将相同的标签打印两次，因为它们应该是不同的。还有一件事我注意到指令

的console.log（ctrlInstName）;

只执行一次。我不知道这里发生了什么。

javax.annotation.Resource

// Code goes here
angular.module('plunker', ['loadPlugin']);

function randomString(length) {
    chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    var result = '';
    for (var i = length; i > 0; --i) result += chars[Math.floor(Math.random() * chars.length)];
    return result;
}

angular.module('loadPlugin', [])
.directive("loadPlugin", ['$compile', function($compile){
  
  var ctrlInstName = "loadPluginCtrl_" + randomString(8);
  console.log(ctrlInstName);
  
  return{
    restrict: 'E',
    replace: true,
    controller: "loadPluginCtrl",
    controllerAs:ctrlInstName,
      link: function(scope, element, attrs) {
         
        scope.label = randomString(attrs.plug);
        var template = '<p>{{label}}</p>';
        var linkFn = $compile(template);
        var content = linkFn(scope);
        element.append(content);
        
      } // End link
    }; // End return
}])
.controller("loadPluginCtrl", ['$scope', function($scope) {
  // This controller should be instantiated as many times
  // as the directive is used in HTML.
}]);

让我向你们解释一下，实际上我正在尝试做什么。我有 n 存储在服务器上的表单模板及其数据数据库。处理表单所需的所有功能都已在控制器中编写。让我们说它是所有这些的基础控制器。

使用GET服务动态加载表单模板及其数据。
自动将基本控制器的实例分配给它。

我知道Angular是为SPA设计的，但我的要求更像网站。当我以为我可以使用指令实现这个时，我错了。

如果有人指出我正确的方向，我会很高兴。

Answer 1

每次编译指令时都会实例化控制器，这就是它的用途。

问题是你选择了错误的方法来测试它。指令工厂功能仅执行一次。这就是为什么ctrlInstName永远不会改变的原因。应将所有特定于控制器的代码放入控制器。

动态controllerAs属性是不可能的，这是一个设计错误。

Answer 2

每个指令实例都会创建一个新的控制器实例....但是模块中只有一个指令注册

如果使用controllerAs，您希望为控制器对象赋值而不是$ scope，并且创建动态控制器别名没有任何好处：

angular.module('loadPlugin', [])
  .directive("loadPlugin", ['$compile', function($compile) {
    return {
      restrict: 'E',
      replace: true,
      controller: "loadPluginCtrl",
      //scope: {},
      template: '<p>{{$ctrl.label}}</p>',
      controllerAs: '$ctrl',
      link: function(scope, element, attrs, ctrl) {
          ctrl.label = randomString(attrs.plug);
      } // End link
    }; // End return
  }])
  .controller("loadPluginCtrl", ['$scope', function($scope) {
    var vm = this;
    // demonstrate that each use creates own instance of controller
    $scope.$watch(function(){
      return vm.label;
    }, function(nVal) {         
      if (nVal) {
        console.log('Label for this instance is:', nVal)
      }
    })
  }]);

的 DEMO

在angularjs中自动创建控制器实例

2 个答案: