javascript - Controller 被放入指令中

Question

我知道可以将 Controller 放入指令中，但我无法让它按照应有的方式工作。在下面添加了 plunker 链接。

我的工作指令和 Controller 在一个 Javascript 文件中

此代码完美运行，但我想修改 app.controller并将它移到我的 app.directive 中

 app.controller('NameCtrl', function () {
   var vm = this;
   vm.namePattern =  '/^[a-zA-Z ]{1,25}$/';
 });

app.directive('nameDirective', function () {
  return {
    restrict: 'AE',
    templateUrl: '/name.html'
  }
});

我的 Index HTML 文件中的一些代码

第一个<div>是针对上面的代码，第二个<div>是我正在处理的指令(如下)。

<div ng-controller="NameCtrl" name-directive></div>
<!--<div name-directive></div> -->

templateURl name.html 文件中的代码

似乎ng-pattern="ctrl.namePattern"根本不起作用，但是当我使用上面的第一个 JS 代码并将其修改为 ng-pattern="namePattern" 时它完全起作用了.

<input type="text" name="username" class="form-control" placeholder="Enter your first name"
     ng-model="username"
     ng-minlength="2"
     ng-maxlength="20"
     required
     ng-pattern="ctrl.namePattern"/>

我正在处理我的 JS 文件的代码(来自上面的代码)

app.directive('nameDirective', function () {
  return {
    restrict: 'AE',
    scope: {
    },
    controller: function($scope) {
      $scope.namePattern = '/^[a-zA-Z ]{1,25}$/';
    },
    controllerAs: 'ctrl',
    bindToController: true,
    templateUrl: '/name.html'
  }
});

我希望，我能清楚地解释我的问题。

这是 link我正在处理的示例代码。

Answer 1

如果不使用隔离范围，只需将其从指令中删除或使用 scope: true...

app.directive('nameDirective', function () {
  return {
    restrict: 'AE',
    //scope: {}, //Or you can use scope: true (It hasn't much sense in your case)
    controllerAs: 'ctrl',
    bindToController: true,
    controller: function() {
        var vm = this;
        vm.namePattern = '/^[a-zA-Z ]{1,25}$/';
    },
    templateUrl: '/name.html'
  }
});

查看您的指令是否有效，I've updated your PLUNKER .