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

saving model value while using directive with isolated scope not working

本文关键字：指令 保存 模型 不起作用 作用域 隔离      更新时间：2023-09-26

我创建了一个名为<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"
    },

    }

});

示例代码

我已经添加了一个提交，正在尝试保存我的型号命名产品。但我变得不确定了。

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

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

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

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

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

mainApp.directive('student', function () {
  return {
    restrict: 'E',
    templateUrl: 'temp.html',
    scope: {
      productedit: "=operation"
    },
    }
});
  1. 在scope属性（它是该对象的最后一个属性）之后
  2. 您的控制器/链接功能在哪里
  3. 您应该将productadd移动到服务中
相关文章：