In die Richtlinie einzufügende Steuerung

Question

Ich weiß, dass es möglich ist, den Controller in die Richtlinie aufzunehmen, aber ich kann es nicht so machen, wie es sein sollte. Link unten hinzugefügt.

Meine Arbeitsrichtlinie und Steuerung in einem Javascript

Datei perfekt Dieser Code funktioniert, aber ich mag die app.controller ändern und es in meinen 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' 
    } 
}); 

einigen Codes in meinem Index HTML bewegen Datei

die erste <div> ist für den obigen Code und die zweite <div> ist für meine Anweisung, an der ich arbeite (unten).

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

Codes in templateURl name.html

es scheint Datei, die ng-pattern="ctrl.namePattern" überhaupt nicht funktioniert, aber es funktioniert völlig, wenn ich den ersten JS-Code oben verwenden und es nur zu ng-pattern="namePattern" ändern.

<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"/> 

Die Codes ich auf meine JS-Datei arbeite (von den Codes oben)

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

Ich hoffe, erkläre ich mein Problem klar.

Dies ist die link meines Beispielcodes, an dem ich arbeite.

Answer 1

Wenn nicht isoliert Umfang verwendet wird, entfernen Sie es aus Ihrer Richtlinie oder scope: true verwenden ...

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

Ihre Richtlinie Arbeits Siehe I've updated your PLUNKER.