angular 지시어 속성이 평가되지 않았습니다.

Question

대답은 here으로 언급했지만 행운은 없었습니다 (angularjs 1.3을 사용하고 있습니다). 내 문제는 두 부분

1) 복합 속성 바인딩 한 방법을 제공하는 범위에서 평가한다

2) 함수 이하 '='(참조 번호)를 사용하더라도 객체로 전달되지 않는도이다

<button type="button" class="btn btn-success" ng-click="RestEditCtrl.saveRestaurantDetails();"> 
    <smart-btn-label btn-state="RestEditCtrl.ajaxState(RestEditCtrl.restaurant.id)" 
     when-normal="{label: 'Save', icon: 'glyphicon-floppy-disk' }" 
     when-active="{label: 'Saving...', icon: 'glyphicon-refresh glyphicon-spin-animate'}" 
     when-success="{label: 'Saved!', icon: 'glyphicon glyphicon-floppy-saved'}" 
     when-error="{label: 'Try saving again', icon: 'glyphicon glyphicon-exclamation-sign'}"></smart-btn-label> 
</button> 

지시 코드, 대신 문자열

샘플 사용으로 전달되는

angular.module("app") 
    .directive('smartBtnLabel', function() { 
     return { 
      restrict: 'E',   
      scope: { 
       btnState: '&', // not working, @ evaluates but that defeats my purpose 
       whenActive: '=', // not evaluating any which way, it always comes as string 
       whenError: '=', 
       whenSuccess: '=', 
       whenNormal: '=' 
      }, 
      link: function (scope, elem, attrs) { 
       console.log(attrs); 
       var curState = "normal", 
        curLabel = attrs.whenNormal ? attrs.whenNormal.label : "", 
        curIcon = attrs.whenNormal ? attrs.whenNormal.icon : ""; 

       if (attrs.btnState) curState = attrs.btnState; 

       if(curState == "active"){ 
        curLabel = attrs.whenActive ? attrs.whenActive.label : ""; 
        curIcon = attrs.whenActive ? attrs.whenActive.icon : "" 
       } else if(curState == "success"){ 
        curLabel = attrs.whenSuccess ? attrs.whenSuccess.label : ""; 
        curIcon = attrs.whenSuccess ? attrs.whenSuccess.icon : "" 
       } else if(curState == "error"){ 
        curLabel = attrs.whenError ? attrs.whenError.label : ""; 
        curIcon = attrs.whenError ? attrs.whenError.icon : "" 
       } 

       scope.curLabel = curLabel; 
       scope.curIcon = curIcon; 
      }, 
      template: '<span aria-hidden="true" ng-show="curIcon" class="glyphicon {{curIcon}}" ></span>' + 
         '<span ng-show="curLabel">&nbsp;{{curLabel}}</span>' 
     }; 
    }); 

여기서 내가 뭘 잘못하고 있니? PSL에

감사 솔루션

---

:-(, 여기에 내가 함께 결국 무엇을 :

angular.module("app") 
    .directive('smartBtnLabel', function() { 
     return { 
      restrict: 'E',   
      scope: { 
       btnState: '&', 
       whenActive: '&', 
       whenError: '&', 
       whenSuccess: '&', 
       whenNormal: '&' 
      }, 
      controller: ['$scope', function($scope){ 
       var vm = this; 
       vm.props = {icon: "", label: ""}; 

       var _setProperties = function() { 
        var _btnState = "normal"; 

        if ($scope.btnState) _btnState = $scope.btnState(); 

        if (_btnState == "active" && $scope.whenActive) vm.props = $scope.whenActive(); 
        else if (_btnState == "success" && $scope.whenSuccess) vm.props = $scope.whenSuccess(); 
        else if (_btnState == "error" && $scope.whenError) vm.props = $scope.whenError(); 
        else if ($scope.whenNormal) vm.props = $scope.whenNormal(); 
       }; 

       if($scope.btnState){ 
        $scope.$watch($scope.btnState, function() { 
         _setProperties(); 
        }); 
       } 

       _setProperties(); 
      }], 
      controllerAs : "smartBtnLabelCtrl",    
      template: '<span aria-hidden="true" ng-show="smartBtnLabelCtrl.props.icon" class="glyphicon {{smartBtnLabelCtrl.props.icon}}" ></span>' + 
         '<span ng-show="smartBtnLabelCtrl.props.label">&nbsp;{{smartBtnLabelCtrl.props.label}}</span>' 
     }; 
    }); 

Answer 1

1) 복합 속성에도 불구하고 객체로 전달되지 않습니다 범위에 '='(아래 코드 참조)를 사용합니다.

attrs.whenNormal이 문자열 (JSON)로 표시되기 때문입니다. 대신 범위에서 액세스해야합니다 (예 : scope.whenNormal). scope.$eval(attrs.whenNormal) 또는 JSON.parse(attrs.whenNormal)//provided your JSON is valid과 같을 것입니다. 그러나 여기에 바인딩되는 2 가지 방법은별로 의미가 없습니다.

2) 단방향 바인딩을 제공하기 위해 평가해야하는 함수도 대신 문자열로 전달됩니다. 당신은 그들이 바운드 값 게터로 평가받을 바인딩 기능을 사용할 때 (당신이 RestEditCtrl.restaurant.id로 바운드 값을 지정) 때문이다

. 값에 액세스하려면 Inorder에 함수 ajaxState이 반환되면 curState = attrs.btnState 대신 curState = scope.btnState();을 수행해야하며 기본적으로 getter를 평가하여 값을 얻습니다.