Question

有没有办法在AngularJS模板中添加新范围？

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

基本上按钮将处于“活动”状态或“非活动”状态。

在'有效'时，修饰符将增加，在'无效'时它将恢复正常。

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

如何在此模板中创建新范围，以便在整个100个按钮中将修饰符保留为变量名称？

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>

在AngularJS模板中创建新范围？

1 个答案: