AngularJS - 我需要在我的指令中創建ng模型並將其附加到主範圍

Question

好吧，所以我的問題是我有一個自定義指令，我有一個單選按鈕模板。我將這個模板運行到我的html中，並且當兩個按鈕中的第一個被選中以打開另一個內容並且當第二個被選中以隱藏這個內容時我想要。

問題是，我不能將ng模型附加到主範圍，我不能將它與ng-show一起用於html。

是否有任何可能導致ng-repeat在某處出現問題？進入指令還是進入HTML？

我真的需要一些幫助，我知道我的代碼不容易閱讀，但我希望有人會給我一些提示，因爲我花了超過4小時努力使其工作。

因此，這裏是我的代碼：

控制器：

.controller('HomeController', ['$scope','$http', 'fileName', function($scope, $http, fileName){ 

     $http.get(fileName) 
      .then(function(response){ 
       var mainObj = []; 
       for(var i = 0; i < response.data.length; i++){ 
        for(var j = 0; j < response.data[i].length; j++){ 
         mainObj.push(response.data[i][j]); 
        } 
       } 
       $scope.content = mainObj; 

      }); 

    }]) 

指令：

.directive('radioTag', ['$compile', function($compile) { 

     return { 
      restrict: 'A', 
      scope: { 
       tag: '=' 
      }, 
      link: function (scope, element) { 

        var template = ''; 

        if (scope.tag.type === 'radio') { 

         var choicesCounter = scope.tag.choices; 

         var checkIt = {}; 
         checkIt.ch1 = []; 

         for (var i = 0; i < choicesCounter.length; i++) { 

          if (i === 0) { 
           checkIt.ch1.push({ 
            id: scope.tag.choices[i].id, 
            title: scope.tag.choices[i].title, 
            value: "cardMethod" 

           }); 
          } 
          else { 
           checkIt.ch1.push({ 
            id: scope.tag.choices[i].id, 
            title: scope.tag.choices[i].title, 
            value: "otherMethod" 

           }); 
          } 
         } 

         scope.checkIt1 = checkIt; 
         scope.really = "real"; 
       }; 

       }, 
       template: 
      ' <div class="btn-group col-xs-12" data-toggle="buttons">'+ 
      '<span ng-repeat="el in checkIt1.ch1"><label class="btn btn-primary btn-primary-spacing col-xs-5"><input type="{{tag.type}}" ' + 
       'id="{{el.id}}" ' + 
       'name="{{tag.paramName}}" ' + 
       'ng-model="really" ' + 
       'value="{{el.value}}" ' + 
       '/>{{el.title}}</label><span class="col-xs-1"></span></span></div>' 
      }; 

    }]) 

的HTML：

<div style="max-width:700px" ng-controller="HomeController" class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="well well-sm"> 
       <form class="form-horizontal" name="registration_form" id="registration_form"> 
        <br /><br/> 
        <fieldset> 
         <legend class="text-center header">Contact Details</legend> 
         <div class="form-group"> 
           <div ng-repeat="el in content"> 

            <span radio-tag really="really" tag=el ng-show = "el.type == 'radio'"></span> 
            <span ng-show="really === 'cardMethod'" card-tag tag=el ng-if = "el.type == 'cardIcons'"></span> 
            <span ng-show="really === 'cardMethod'" select-tag tag=el ng-if = "el.type == 'select'"></span> 
           </div> 
          </div> 
         </fieldset> 
        </form> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

進樣$rootScope在directiv使用$scope.$on在您的控制器範圍e和$broadcast時scope.really在指令隔離範圍內的數據（的scope.really值）發生變化，並聽取並指定你在控制器（HomeController）的範圍內接收到的數據值，否則，你可以做一個$emit從你的指令範圍，如果它的孩子總是你的主控制器範圍。