Question

我想创建一个在Directive中构建的项目列表，并通过控制器共享。

以下是我在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指令中。

请帮助......

Answer 1

您的代码有几个问题。

首先，ng-model的{{1}}设置为<input>，但您希望将其绑定到address的对象brunch属性。重要的是要意识到address将为每个重复的项目创建一个子范围

ng-repeat

另一个问题是您也将父控制器分配给指令。重要的是要理解控制器是单例，因此如果您多次使用控制器，则每个控制器都是一个单独的实例。因此，将父控制器嵌套在指令中是没有意义的。

的 DEMO- [ng-model] fix

如果您希望与其他控制器共享数据，您应该设置一个包含<input data-ng-model="brunch.address"/>数据的服务，方法是将其注入任何需要访问的控制器

创建使用angularjs构建的项目列表

1 个答案: