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对象的值，该对象最初是{}＆amp;这将由指令模板修改。

<强> HTML

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

<强>控制器

$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

Answer 2

$scope.submit = function () {
  console.log($scope.product);
};

它记录一个未定义的范围属性，因此它永远不会在任何地方保存任何更改

mainApp.directive('student', function () {
  return {
    restrict: 'E',
    templateUrl: 'temp.html',
    scope: {
      productedit: "=operation"
    },
    }
});

在范围属性（它是该对象的最后一个属性）之后不应该有
您的控制器/链接功能在哪里？
您应该将productadd移至服务中。

使用具有隔离范围的指令不起作用时保存模型值

2 个答案: