Question

我是AngularJS的新手我写了两个程序。首先是自动附加输入文本框

<div ng-app="myApp" ng-controller="MyCtrl">
[<span ng-repeat="input in inputs">"{{input.field}}"</span>]
<div ng-repeat="input in inputs">
    <label>{{$index+1}}</label>
    <input type="text" ng-model="input.field" capitalize-first>
    <button ng-click="removeInput($index)">-</button>
</div>
    <button ng-click="addInput()">+</button>
</div>

------------------------------------------------------------
var app = angular.module('myApp', []);

app.controller('MyCtrl', ['$scope', function ($scope) {
$scope.inputs = [];

  $scope.addInput = function(){
  $scope.inputs.push({field:''});
}

  $scope.removeInput = function(index){
  $scope.inputs.splice(index,1);
}

}]);

http://jsfiddle.net/A6G5r/134/

，第二个是使用指令自动大写过滤器。

<div ng-controller="MyCtrl">
<input type="text" ng-model="input.field" capitalize-first>
 </div>

var myApp = angular.module('myApp',[]);

myApp.directive('capitalizeFirst', function(uppercaseFilter, $parse) {
return {
 require: 'ngModel',
 link: function(scope, element, attrs, modelCtrl) {
    var capitalize = function(inputValue) {
       var capitalized = inputValue.charAt(0).toUpperCase() +
           inputValue.substring(1);
       if(capitalized !== inputValue) {
          modelCtrl.$setViewValue(capitalized);
          modelCtrl.$render();
        }         
        return capitalized;
     }
     var model = $parse(attrs.ngModel);
     modelCtrl.$parsers.push(capitalize);
     capitalize(model(scope));
  }
 };
});

function MyCtrl($scope) {
  $scope.name = '';
}

http://jsfiddle.net/YyYnM/339/

首先使用controller编写，另一个使用指令。我无法合并两个程序，并且在合并时无法理解指令和控制器的范围。

任何人都可以建议我在合并这两个时怎么样？

Answer 1

不要以这种方式声明模块。不需要使用变量进行模块分配，并创建漏洞抽象。

相反，您应该使用模块getter和setter语法。请参阅John Papa的风格指南中的excerpt，了解有关此实践和其他最佳实践的更多信息。

而不是：

var app = angular.module('myApp', []);

app.controller('MyCtrl', ['$scope', function ($scope) {

使用：

angular.module('myApp', []);

angular.module('myApp').controller('MyCtrl', ['$scope', function ($scope) {

然后，在第二个文件（指令）中，您不需要再次声明myApp模块，只需链接到声明：

angular.module('myApp').directive('capitalizeFirst', function(uppercaseFilter, $parse) {

为输入框AngularJS集成控制器和指令

1 个答案: