Angular（1.4）設計和佈局

Question

我想不出一個好的標題，因爲我不是100％確定要問什麼，加上這可能是棘手的，沒有發佈我的整個應用程序。

我是新角度，並希望創建一個網站舉行食譜。 我正在使用MVC和Web API，並將基礎知識放在一起。 我想讓配方編輯過程具有良好的用戶體驗，因此希望用戶能夠在不離開頁面的情況下添加配料並進行編輯和保存。

目前我有一個角度模塊和配方編輯控制器，我想有一個子應用程序，允許他們添加和編輯配料。我不希望他們必須離開。

我需要知道的是a）術語。我正在考慮成分編輯器作爲一個子應用程序，但它只是一個子控制器？ 和b）叫什麼樣的模式？主細節視圖？

以下是我目前的「EditRecipeViewModel」 在我newAddIngredient推動的成分對象到一個數組的那一刻，這可以再進行編輯和保存saveNewIngredient，但是這是骯髒和編輯的成分不工作。我想我想要編輯一個成分封裝在一個單獨的東西的功能，但是，一個模塊是一個控制器或什麼？也許我想在我走路之前跑步？

//edit recipe 
//add ingredients 
//add picture(s) 
//confirm 
//save 

var editRecipeModule = angular.module('editRecipe', ['common']) 
.config(function ($routeProvider, $locationProvider) { 
    $routeProvider.when(CookBook.rootPath + 'recipe/edit', { templateUrl: CookBook.rootPath + 'Templates/EditRecipe/EditRecipe.html', controller: 'EditRecipeViewModel' }); 
    $routeProvider.when(CookBook.rootPath + 'recipe/edit/confirm', { templateUrl: CookBook.rootPath + 'Templates/EditRecipe/ConfirmRecipe.html', controller: 'ConfirmRecipeViewModel' }); 
    $routeProvider.otherwise({ redirectTo: CookBook.rootPath + 'recipe/edit/' }); 
    $locationProvider.html5Mode({ enabled: true }); 
}); 


editRecipeModule.controller("EditRecipeViewModel", function ($scope, $window, viewModelHelper, validator) { 
$scope.viewModelHelper = viewModelHelper; 
$scope.editRecipeModel = new CookBook.EditRecipeModel(); 
$scope.newIngredient = new CookBook.IngredientModel(); 

$scope.ingredients = []; 

var editRecipeRules = []; 
var setupRules = function() { 
    editRecipeRules.push(new validator.PropertyRule("Name", { 
     required: { message: "Recipe name is required." } 
    })); 
    editRecipeRules.push(new validator.PropertyRule("Description", { 
     required: { message: "Please add a description." } 
    })); 
    editRecipeRules.push(new validator.PropertyRule("Method", { 
     required: { message: "All good recipes need a method." } 
    })); 
} 

var editIngredientRules = []; 
var setupIngredientRules = function() { 
    editIngredientRules.push(new validator.PropertyRule("Name", { 
     required: { message: "Name is required" } 
    })); 
    editIngredientRules.push(new validator.PropertyRule("Amount", { 
     required: { message: "Amount is required" } 
    })); 
    editIngredientRules.push(new validator.PropertyRule("Unit", { 
     required: { message: "Unit is required" } 
    })); 
} 


$scope.confirm = function() { 
    validator.ValidateModel($scope.editRecipeModel, editRecipeRules); 
    viewModelHelper.modelIsValid = $scope.editRecipeModel.isValid; 
    viewModelHelper.modelErrors = $scope.editRecipeModel.errors; 
    if (viewModelHelper.modelIsValid) { 
     //save via web api 
    } 
} 

$scope.newAddIngredient = function() { 
    $scope.newIngredient = new CookBook.IngredientModel(); 

    $scope.newIngredient.EditMode = true; 
    $scope.ingredients.push($scope.newIngredient); 
} 

$scope.saveNewIngredient = function() { 
    $scope.newIngredient.EditMode = false; 

} 

$scope.addIngredient = function() { 
    validator.ValidateModel($scope.newIngredient, editIngredientRules); 
    viewModelHelper.modelIsValid = $scope.newIngredient.isValid; 
    viewModelHelper.modelErrors = $scope.newIngredient.errors; 

    if (viewModelHelper.modelIsValid) { 

     $scope.ingredients.push($scope.newIngredient); 
     $scope.newIngredient = new CookBook.IngredientModel(); 
    } 
} 

setupRules(); 
setupIngredientRules(); 
}); 


editRecipeModule.controller("ConfirmRecipeViewModel", function ($scope, $window, viewModelHelper) { 
    $scope.viewModelHelper = viewModelHelper; 
    //$scope.editRecipeModel = new CookBook.editRecipeModel(); 

}); 

Answer 1

已經做了一些更reading

我現在知道答案是使用一個額外的控制器來處理UI的那一小部分。

我失蹤的關鍵部分是把控制器用在HTML中。

ng-controller="IngredientViewModel as ivm" 

我的HTML。

 <div class="row" ng-controller="IngredientViewModel as ivm" ng-repeat="ingredient in ingredients"> 
     <span class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> 
      <input ng-show="ivm.ingredient.EditMode" ng-model="ivm.ingredient.Name" ng-change="newIngredientChanged()"></input> 
      <span ng-hide="ivm.ingredient.EditMode">{{ivm.ingredient.Name}}</span> 
     </span> 
     <span class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> 
      <input ng-show="ivm.ingredient.EditMode" ng-model="ivm.ingredient.Amount"></input> 
      <span ng-hide="ivm.ingredient.EditMode">{{ivm.ingredient.Amount}}</span> 
     </span> 
     <span class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> 
      <input ng-show="ivm.ingredient.EditMode" ng-model="ivm.ingredient.Unit"></input> 
      <span ng-hide="ivm.ingredient.EditMode">{{ivm.ingredient.Unit}}</span> 
     </span> 
     <span class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> 
      <button ng-show="ivm.ingredient.EditMode" ng-click="ivm.save()">OK</button> 
      <button ng-hide="ivm.ingredient.EditMode" ng-click="ivm.edit()">Edit</button> 
     </span> 
    </div> 

控制器..

editRecipeModule.controller("IngredientViewModel", function ($scope, $window, viewModelHelper, validator) { 
    var local = this; 
    local.ingredient = new CookBook.IngredientModel(); 

    local.ingredient.Name = "bob"; 
    local.ingredient.Amount = "100"; 
    local.ingredient.Unit = "g"; 
    local.ingredient.EditMode = true; 

    var editRules = []; 
    var setupRules = function() { 
     editRules.push(new validator.PropertyRule("Name", { 
      required: { message: "Name is required" } 
     })); 
     editRules.push(new validator.PropertyRule("Amount", { 
      required: { message: "Amount is required" } 
     })); 
     editRules.push(new validator.PropertyRule("Unit", { 
      required: { message: "Unit is required" } 
     })); 
    } 

    local.save = function() { 
     validator.ValidateModel(local.ingredient, editRules); 
     viewModelHelper.modelIsValid = local.ingredient.isValid; 
     viewModelHelper.modelErrors = local.ingredient.errors; 

     if (viewModelHelper.modelIsValid) { 
      local.ingredient.EditMode = false; 
     } 
    } 

    local.edit = function() { 
     local.ingredient.EditMode = true; 
    } 

    setupRules(); 
});