控制器裏面的指令

放在我知道這是可能把控制指令內，但我不能讓它的應該如何工作。添加下面的plunker鏈接。控制器裏面的指令

我的工作指令和控制器中的一個JavaScript文件

此代碼的工作完美，但我想修改app.controller，在我的指數HTML移動這裏面我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' 
    } 
});

一些代碼文件

第一<div>爲上面的代碼，並且所述第二<div>適用於我正在處理的指令（下圖）。在templateURl

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

碼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。

來源

2017-03-26 Marksmanship

的'NG-controller'指令使用'範圍：TRUE'。您的指令使用隔離範圍，範圍：{}。 – georgeawg

如果使用的不是孤立的範圍，只是從你的指令，刪除或使用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。

來源

2017-03-27 00:50:07

感謝您的幫助。有用。 – Marksmanship

控制器裏面的指令

回答

相關問題