是否在AngularJS模板中创建新作用域？

Question

有没有办法在AngularJS模板中添加新的作用域？

<button ng-click="modifier + 1 if inactive or modifier - 1 if inactive">{{someNumber + modifier}}</button>

基本上，按钮将具有“活动”状态或“非活动”状态。

在“活动”状态下，修改量会增加，在“不活动”状态下会恢复到正常状态。

但是假设我有100个这样的按钮。我可以让变量像modifier 1，modifier-2，....但这不是最佳实践。

我如何在这个模板中创建一个新的作用域，这样我就可以在100个按钮中保持modifier作为变量名？

Answer 1

从你的问题中我了解到所有按钮的作用域都需要相同，所以我建议使用下面的代码，如果代码片段是正确的，使用它来构建你的代码，指令包含一个独立的作用域，这样控制器变量就不会影响指令变量，并且修饰符和somevalue的值被写在指令中，如果你想让这个从控制器传递，就通过这个作用域传递变量。参考：pass variable from controller to directive

​

    var myApp = angular.module('myApp', []);
    
    myApp.controller('MyController', ['$scope', function ($scope) {
        $scope.items = [{
            salutation: 'Hello',
            name: 'World'
        }, {
            salutation: 'Konichiwa',
            name: 'Mr. Roboto'
        }];
         $scope.test = "nare";
    }]);

    myApp.directive('customButton', function () {
    return {
        restrict: "E",
        scope: {},
        template: '<button ng-repeat="x in [].constructor(100) track by $index" ng-click="modifiertoggle()">{{output}}</button>',
        link: function(scope, element, attrs){
        	scope.somevalue = 100;
          scope.modifier = {value:32, state: 'active'};
          scope.output = scope.somevalue - scope.modifier.value;
          console.log(scope.output);
          scope.modifiertoggle = function(){
          	scope.modifier.state = scope.modifier.state === 'active' ? 'inactive' : 'active';
            if(scope.modifier.state === 'active'){
          		scope.output = scope.somevalue - scope.modifier.value;
            }else{
          		scope.output = scope.somevalue + scope.modifier.value;
            }
          }
        }
    };
});

button{
  height:50px;
  width:75px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller='MyController'>
    <custom-button></custom-button>
</div>

​