javascript - 使用隔离范围指令时保存模型值不起作用

Question

我创建了一个具有隔离范围的指令，名为 <student> ，一切工作正常，我能够使用隔离范围“=”将不同的数据传递给我的指令。但我无法保存数据中的更改。代码:

<div ng-app="mainApp" >
    <div layout="column" flex ng-controller="StudentController">
        <student operation="productadd"></student>

        <button type="submit" ng-click="submit()">click</button>
       <div style="float:left;background:#ccc;">

           <!--<student operation="productmodify"></student>-->
       </div>
    </div>

</div>

app.js

var mainApp = angular.module("mainApp", ['ngMaterial']);

mainApp.controller('StudentController', ['$scope', '$mdDialog', function ($scope, $mdDialog) {



    $scope.productadd = {};



    $scope.productadd.colors = ['#a55466', '#8298a6', '#586a75', '#af1e2c', '#b3995d', '#7fc7af',
            '#afb4bb', '#b9adad', '#899a9f', '#7d7d7d', '#525252', '#636c6f',
            '#347d7b', '#b1b1b1', '#53748c', '#927f92', '#695769', '#a07c7c', '#6f7d86',
            '#94b1c4', '#24122a', '#6c6169', '#6d5656', '#d19898', '#ac7c7c', '#aaaaaa',
            '#bbcccc', '#999999', '#ccbbbb', '#779999', '#cdc1c5', '#8b8386'];

    $scope.productadd.uomList = ['oz1', 'mm2', 'meter3'];

    $scope.productadd.merchList = ['hand', 'tray', 'case', 'basket'];

    $scope.productadd.nameList = ['Unit', 'Case', 'TRAY', 'Pallet 4 layers', 'Half Pallet 3 layers', ' Half Pallet 4 layers', ' Cut Case 24', 'Pallet 3 layers', 'Cut Case 12'];

    $scope.productadd.orientationList = ['Front End', 'Front Side', 'Side End', 'Side Front', 'End Front', 'End Side'];

    $scope.productadd.distributerTypeList = ['WHS', 'DSP', 'DSB', 'DSA', 'DSS', 'DSD'];



    $scope.productmodify = {};



    $scope.productmodify.colors = ['#a55466', '#8298a6'];

    $scope.productmodify.uomList = ['oz', 'mm', 'meter'];

    $scope.productmodify.merchList = ['hand', 'tray', 'case', 'basket'];

    $scope.productmodify.nameList = ['Unit', 'Case', 'TRAY', 'Pallet 4 layers', 'Half Pallet 3 layers', ' Half Pallet 4 layers', ' Cut Case 24', 'Pallet 3 layers', 'Cut Case 12'];

    $scope.productmodify.orientationList = ['Front End', 'Front Side', 'Side End', 'Side Front', 'End Front', 'End Side'];

    $scope.productmodify.distributerTypeList = ['WHS', 'DSP', 'DSB', 'DSA', 'DSS', 'DSD'];





    $scope.submit = function () {

        console.log($scope.product);
    }


}]);

mainApp.directive('student', function () {

    return {
    restrict: 'E',
    templateUrl:'temp.html',

    scope: {
        productedit: "=operation"
    },


    }


});

examplecode

我已添加提交并尝试保存名为产品的模型。但我变得不确定。

请指导我如何解决这个问题。

Answer 1

按照您当前的 html 结构方式，您已将提交表单按钮放置在指令模板之外。为了解决这个问题，基本上你只是传递dropdowns的值。因此，我建议您传递 product 对象的值，该对象最初为 {} 并将由指令模板修改。

HTML

<student operation="productadd" product="product"></student>

Controller

$scope.product = {}; //initially blank, filled up by directive.

指令

mainApp.directive('student', function() {
  return {
    restrict: 'E',
    templateUrl: 'temp.html',

    scope: {
      productedit: "=operation",
      product: '=' //pass product object here
    },
  }
});

Demo Plunkr