Javascript 在AngularJS中传递给指令的属性只会更改为指令范围，而不会更改为指令范围之外的属性

我想使用一个指令来定制我的代码

我创建了一个按钮来切换控制器中定义为：

@scope.isCollapsedUpload=false的
isCollapsedUpload
标志

当用户按下按钮时，
isCollapsedUpload
将变为
true
，反之亦然，图标将更改

从控制器：

$scope.switcher = function (booleanExpr, trueValue, falseValue) {
    return booleanExpr ? trueValue : falseValue;  
}

$scope.isCollapsedUpload = false;  

<button class="btn" ng-click="isCollapsedUpload = !isCollapsedUpload">                
    <span>Upload file</span>
    <i class="{{ switcher( isCollapsedUpload, 'icon-chevron-right', 'icon-chevron-down' )}}"></i>
</button>

现在我可以像这样使用它：

<collapse-extend 
              collapse-target="isCollapsedUpload"
              label="Upload file"                  
></collapse-extend>



它不起作用。没有图标更改。没有错误

isCollapsedUpload
标志不会更改。它只会变成指令

我遗漏了什么吗？
类没有正确更改的原因是您没有正确链接模板。如果使用内置功能，这很容易修复：

var feederliteModule = angular.module('feederliteModule', []);
feederliteModule.directive('collapseExtend', [function() {
  return {
    restrict: 'E',
    scope: { 
      isCollapsed:'=collapseTarget',
      label: '@'
    },
    template: '<button class="btn" ng-click="isCollapsed = !isCollapsed">'+       
                '<span>{{ label }}</span>'+  
                '<i ng-class="{ \'icon-chevron-right\': isCollapsed, \'icon-chevron-down\': !isCollapsed }"></i>'+  
              '</button>'
  }
}]);
feederliteModule.controller('test', ['$scope', function($scope) {
  $scope.isCollapsedUpload = false;
}]);

var feederliteModule=angular.module（'feederliteModule'，[]）；
指令（'collapseExtend'，[function（））{
返回{
限制：'E'，
范围：{
iscollected:'=collapseTarget'，
标签：“@”
},
模板：“”
{{label}}}+
''+  
''
}
}]);
FeederItemModule.controller（'test'，['$scope'，function（$scope）{
$scope.isCollapsedUpload=false；
}]);

据我所知，通过替换父元素，您删除了绑定此对象的隔离作用域，而没有在按钮本身上创建新的隔离作用域。
类没有正确更改的原因是您没有正确链接模板。如果使用内置功能，这很容易修复：

var feederliteModule = angular.module('feederliteModule', []);
feederliteModule.directive('collapseExtend', [function() {
  return {
    restrict: 'E',
    scope: { 
      isCollapsed:'=collapseTarget',
      label: '@'
    },
    template: '<button class="btn" ng-click="isCollapsed = !isCollapsed">'+       
                '<span>{{ label }}</span>'+  
                '<i ng-class="{ \'icon-chevron-right\': isCollapsed, \'icon-chevron-down\': !isCollapsed }"></i>'+  
              '</button>'
  }
}]);
feederliteModule.controller('test', ['$scope', function($scope) {
  $scope.isCollapsedUpload = false;
}]);

var feederliteModule=angular.module（'feederliteModule'，[]）；
指令（'collapseExtend'，[function（））{
返回{
限制：'E'，
范围：{
iscollected:'=collapseTarget'，
标签：“@”
},
模板：“”
{{label}}}+
''+  
''
}
}]);
FeederItemModule.controller（'test'，['$scope'，function（$scope）{
$scope.isCollapsedUpload=false；
}]);

据我所知，通过替换父元素，您删除了此对象绑定的隔离范围，而没有在按钮本身上创建新的隔离范围。
编辑：


我建议使用
服务
而不是
控制器
来维护模型数据。随着应用程序变得越来越复杂，您可以更好地分离关注点：

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

feederliteModule.service('btnService', function(){
    this.isCollapsedUpload = false;
    this.isCollapsedSomething = false;
});

feederliteModule.controller('btnController', function($scope, btnService){
    $scope.isCollapsedUpload = btnService.isCollapsedUpload;
    $scope.isCollapsedSomething = btnService.isCollapsedSomething;
});

feederliteModule.directive('collapseExtend', function() {
    return {
        restrict: 'E',
        scope: {
            isCollapsed:'=collapseTarget',
            label:'@'
        },
        replace: true,
        link: function (scope, element, attrs){
            scope.switcher = function (booleanExpr, trueValue, falseValue) {
                return booleanExpr ? trueValue : falseValue;  
            };
            scope.toggleCollapse = function() {
               scope.isCollapsed = !scope.isCollapsed;
            }              
        },
        template: '<button class="btn" ng-click="toggleCollapse()">'+       
        '<span>{{label}}</span>'+
        '<i ng-class="switcher(isCollapsed, \'icon-chevron-right\', \'icon-chevron-down\')"></i>'+  
        '</button>'
    }
});

var feederliteModule=angular.module（'feederliteModule'，[]）；
FeederItemModule.service（'BTN服务'，函数（）{
this.isCollapsedUpload=false；
this.isCollapsedSomething=false；
});
FeederItemModule.controller（'btnController'，函数（$scope，BTN服务）{
$scope.isCollapsedUpload=btnService.isCollapsedUpload；
$scope.isCollapsedSomething=btnService.isCollapsedSomething；
});
feederItemModule.directive（'collapseExtend'，function（）{
返回{
限制：'E'，
范围：{
iscollected:'=collapseTarget'，
标签：“@”
},
替换：正确，
链接：函数（范围、元素、属性）{
scope.switcher=函数（booleanExpr、trueValue、falseValue）{
返回booleanExpr？trueValue:falseValue；
};
scope.toggleCollapse=函数（）{
scope.isCollapsed=！scope.isCollapsed；
}              
},
模板：“”
“{{label}}”+
''+  
''
}
});

另外，请注意，必须使用“=”而不是“@”，才能使
isCollapsed
按预期工作。上面的答案也需要这个。
编辑：


我建议使用
服务
而不是
控制器
来维护模型数据。随着应用程序变得越来越复杂，您可以更好地分离关注点：

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

feederliteModule.service('btnService', function(){
    this.isCollapsedUpload = false;
    this.isCollapsedSomething = false;
});

feederliteModule.controller('btnController', function($scope, btnService){
    $scope.isCollapsedUpload = btnService.isCollapsedUpload;
    $scope.isCollapsedSomething = btnService.isCollapsedSomething;
});

feederliteModule.directive('collapseExtend', function() {
    return {
        restrict: 'E',
        scope: {
            isCollapsed:'=collapseTarget',
            label:'@'
        },
        replace: true,
        link: function (scope, element, attrs){
            scope.switcher = function (booleanExpr, trueValue, falseValue) {
                return booleanExpr ? trueValue : falseValue;  
            };
            scope.toggleCollapse = function() {
               scope.isCollapsed = !scope.isCollapsed;
            }              
        },
        template: '<button class="btn" ng-click="toggleCollapse()">'+       
        '<span>{{label}}</span>'+
        '<i ng-class="switcher(isCollapsed, \'icon-chevron-right\', \'icon-chevron-down\')"></i>'+  
        '</button>'
    }
});

var feederliteModule=angular.module（'feederliteModule'，[]）；
FeederItemModule.service（'BTN服务'，函数（）{
this.isCollapsedUpload=false；
this.isCollapsedSomething=false；
});
FeederItemModule.controller（'btnController'，函数（$scope，BTN服务）{
$scope.isCollapsedUpload=btnService.isCollapsedUpload；
$scope.isCollapsedSomething=btnService.isCollapsedSomething；
});
feederItemModule.directive（'collapseExtend'，function（）{
返回{
限制：'E'，
范围：{
iscollected:'=collapseTarget'，
标签：“@”
},
替换：正确，
链接：函数（范围、元素、属性）{
scope.switcher=函数（booleanExpr、trueValue、falseValue）{
返回booleanExpr？trueValue:falseValue；
};
scope.toggleCollapse=函数（）{
scope.isCollapsed=！scope.isCollapsed；
}              
},
模板：“”
“{{label}}”+
''+  
''
}
});

另外，请注意，必须使用“=”而不是“@”，才能使
isCollapsed
按预期工作。上面的答案也需要这样做。
我有7个相同类型的按钮，我想让我的代码缩短，所以你想创建一个按钮，当你点击它时，它改变了按钮的类别？它应该做很多事情，但首先我尝试让它只改变标志
iscollapsetarget:“@collapseTarget”
应该是
iscollapsetarget:”=collapseTarget
，以获得预期的结果behavior@NickLarsen“测试”在控制器中的含义是什么？我有7个相同类型的按钮，我想要为了缩短我的代码，你想创建一个按钮，当你点击它时，它会改变按钮的类别？它应该做很多事情，但首先我试着让它只改变标志
iscollapsetarget:'@collapseTarget'
应该是
isCollapsed:'=collapseTarget'
，以获得预期的结果