創建使用angularjs構建的項目列表

我想創建指令中構建的項目列表並通過控制器共享。創建使用angularjs構建的項目列表

這是我在plunker例如：Example of my code

這裏是我的js代碼：

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

app.controller("BrunchesCtrl", function ($scope, $log) { 
    $scope.brunches = []; 

    $scope.addNew = function() { 
     $scope.brunches.push({ address: "" }); 
    }; 
    $scope.$watch('brunch.address', function(value) { 
     $scope.address = value; 
     $log.info($scope.address); 
    }); 

    $scope.$watch(function() { return $scope.brunches.length; }, function() { 
     $scope.brunches = $scope.brunches.map(function (brunch) { 
      return brunch; 
     }); 
    }); 
}); 

app.directive('brunchesView', function ($compile) { 
    return { 
     restrict: 'E', 
     templateUrl: 'brunch.html', 
     controller: 'BrunchesCtrl', 
     replace: true, 
     link: function (scope, element, attrs, controller) { 

     } 
    }; 
}); 

app.directive('businessSubmit', function ($log, $compile, formManagerService) { 
    return { 
     restrict: 'AE', 
     controller: 'BrunchesCtrl', 
     link: function (scope, element, attrs, controller) { 
      formManagerService.init(); 
      var hasError; 

      element.on('click', function (e) { 
       e.preventDefault(); 
       $log.info("brunches: \n"); 
       $log.info(scope.brunches); 
      }); 
     } 
    }; 
});

下面是一個HTML：

<!DOCTYPE html>

  <div class="controls"> 
       <a class="btn btn-danger" id="addBrunch" data-ng-click="addNew()"> 
        <i class="icon-plus-sign"></i> 
        add new... 
       </a> 
      </div> 
     </div> 

     <brunches-view class="well" data-ng-repeat="brunch in brunches">{{brunch}}</brunches-view> 

     <br/> 
     <p class="well"> 
      JSON: {{brunches | json}} 
     </p> 

     <div class="control-group"> 
      <div class="controls"> 
       <a class="btn btn-primary" href="#" data-business-submit> 
        <i class="icon-save"></i> 
        Save... 
       </a> 
      </div> 
     </div> 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>  
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 
    <script src="script.js"></script>

這裏是模板：

<div class="fc-border-separate"> 
    <div class="control-group"> 
     <label class="control-label">Address</label> 
     <div class="controls"> 
      <input type="text" class="span6 m-wrap" 
        name="Address" data-ng-model="address" 
        value="{{address}}" /> 
     </div> 
    </div> 
</div>

我想保存BusinessSubmit指令裏面的整個數據的最後一件事。

幫助請...

來源

2014-01-05 IamStalker

持有brunches數據的服務它有一個特殊的原因你爲什麼要提交一個指令？怎麼樣一個簡單的控制器功能，得到的點擊呼叫？ – michael

我同意@mseemann。這聽起來很奇怪，你試圖實現。 – Dalorzo

你能舉個例子嗎？ – IamStalker

您的代碼的幾個問題。

首先，你ng-model爲<input>設置爲address，但對象你是想將其綁定到具有address屬性brunch對象。必須認識到，ng-repeat將創建一個子範圍，每重複項

<input data-ng-model="brunch.address"/>

的另一個問題是要分配父控制器的指令爲好。重要的是要明白，控制器是單身人士，所以如果你不止一次地使用控制器，每個人都是一個單獨的實例。因此，將父控制器嵌套在指令中是沒有意義的。

DEMO- [ng-model] fix

如果你想與其他控制器共享的數據，你應該建立的是通過將其注入任何控制器都需要訪問

來源

2014-01-05 14:38:05 charlietfl

+1謝謝我不相信它我錯過了那一個...... – IamStalker

創建使用angularjs構建的項目列表

回答

相關問題