從多個控制器上的指令訪問示波器的正確方法

我有一個名爲add-tags的指令，比我計劃在應用程序的不同位置使用指令，我使用它將標籤添加到數組，然後從主要Ctrl鍵，然後從不同的視圖/ Ctrl鍵（模式）預覽時，用戶可以編輯列表，主頁上我有：從多個控制器上的指令訪問示波器的正確方法

<add-tags tags="tags"></add-tags>

和我的指令設置，如下圖所示：

'use strict'; 

     angular.module('theApp') 
      .directive('addTags', function() { 
       return { 
        templateUrl: 'components/add-tags/add-tags.html', 
        //restrict: 'EA', 
        scope: { 
         tags:'=' 
        }, 
        link: function($scope, $element, attrs) { 
        } //link 
       }; 
      });

從編輯控制器，如何訪問以前的標籤數據？當我這樣做，

<add-tags tags="workDetails.tags"></add-tags>

從整個數據從範圍了，但是當我做：

<span ng-repeat="x in workDetails.tags"> 
      <h1>{{x.name}}</h1> 
     </span>

我可以看到標籤的列表，任何幫助將不勝感激:)

我加入附加tags.html例如：

<div ng-repeat="tag in tags" class="text-center new-item"> 
      <div class="input-group"> 
       <input type="text" name="" class="form-control" ng-model="tag.name"> 
       <span class="input-group-btn"> 
        <button 
         type="button" 
         class="btn btn-default" 
         ng-click="deleteTag($index)"> 
         Delete 
        </button> 
       </span> <!-- /.input-group-btn --> 
      </div> <!-- /.input-group --> 
     </div> 

     <div class="form-group" ng-hide="tags.length == tags_max"> 
      <input type="text" class="form-control" placeholder="Enter tag:" ng-model="tag"> 
     </div> 

     <!-- /.form-group --> 
     <button 
      type="button" 
      class="btn btn-primary center-block" 
      ng-disabled="tags.length == tags_max" 
      ng-class="{ 'btn-danger': tags.length == tags_max}" 
      ng-click="addTag()"> 
      Add tag 
     </button> 

     <hr>

來源

2016-03-25 user1547007

因爲你的指令對scope.tags沒有任何作用，它給出了嗎？分享您的add-tags.html模板。 – RamblinRose

@RamblinRose我加了add-tag.html模板 – user1547007

我之前做過這個，希望它有幫助http://codepen.io/comakai/pen/epMBOE – coma

沒有什麼錯你給的代碼。但是 - 除非我錯過了一些信息 - 是否可以假設你的「workDetails」對象應該在任何地方都可用？我可以通過添加一個包含標籤狀態的「workDetailsService」來實現您的場景。

Here's a working plunkr您提供的代碼位，但添加了一個workDetailsService來維護狀態和一些路由。

基本上我增加了一個服務來維持標籤：

theApp.factory('workDetailsService', function() { 
    return { 
    tags: [{ 
     name: "Tag 1" 
    }, { 
     name: "Tag 2" 
    }, { 
     name: "Tag 3" 
    }] 
    } 
});

並注入該服務分爲兩個指令，「listTags」和「editTags」：

theApp.directive('editTags', ['workDetailsService', function(workDetailsService) { 
    return { 
    templateUrl: '/edit-tags.html', 
    link: function($scope, $element, attrs) { 

     $scope.tags_max = 4; 
     $scope.tags = workDetailsService.tags; 

     $scope.addTag = function() { 
     workDetailsService.tags.push({ 
      name: $scope.tag 
     }) 
     } 
     $scope.deleteTag = function(index) { 
     workDetailsService.tags.splice(index, 1) 
     } 
    } 
    }; 
}]); 

theApp.directive('listTags', ['workDetailsService', function(workDetailsService) { 
    return { 
    templateUrl: '/list-tags.html', 
    link: function($scope, $element, attrs) { 
     $scope.tags = workDetailsService.tags; 
    } 
    }; 
}]);

這種方式，你有你的標籤狀態在一個地方，並且指令包裝標籤而不是控制器，因此您可以在任何地方重複使用。

來源

2016-03-25 10:26:45 RamblinRose

從多個控制器上的指令訪問示波器的正確方法

回答

相關問題