Question

我需要将指令中此部分代码的值传递给控制器，但不知道如何实现：

       if (!scope.multiple) {
          scope.model = value;
          console.log(scope.model);
          return;
        }

我在console.log中获取了值，我只是不知道如何将它传递给控制器。这是完整的指令：

angular.module('quiz.directives')
.directive('fancySelect', function($rootScope, $timeout) {
  return {
    restrict: 'E',
    templateUrl: 'templates/directives/fancySelect.html',
    scope: {
      title: '@',
      model: '=',
      options: '=',
      multiple: '=',
      enable: '=',
      onChange: '&',
      class: '@'
    },
    link: function(scope) {
      scope.showOptions = false;
      scope.displayValues = [];

      scope.$watch('enable', function(enable) {
        if (!enable && scope.showOptions) {
          scope.toggleShowOptions(false);
        }
      });

      scope.toggleShowOptions = function(show) {
        if (!scope.enable) {
          return;
        }

        if (show === undefined) {
          show = !scope.showOptions;
        }

        if (show) {
          $rootScope.$broadcast('fancySelect:hideAll');
        }

        $timeout(function() {
          scope.showOptions = show;
        });
      };

      scope.toggleValue = function(value) {
        if (!value) {
          return;
        }

        if (!scope.multiple) {
          scope.model = value;
          console.log(scope.model);
          return;
        }

        var index = scope.model.indexOf(value);
        if (index >= 0) {
          scope.model.splice(index, 1);
        }
        else {
          scope.model.push(value);
        }

        if (scope.onChange) {
          scope.onChange();
        }
      };

      scope.getDisplayValues = function() {
        if (!scope.options || !scope.model) {
          return [];
        }

        if (!scope.multiple && scope.model) {
          return scope.options.filter(function(opt) {
            return opt.id == scope.model;
          });
        }

        return scope.options.filter(function(opt) {
          return scope.model.indexOf(opt.id) >= 0;
        });
      };

      $rootScope.$on('fancySelect:hideAll', function() {
        scope.showOptions = false;
      });
    }
  };
});

已更新

我尝试按照@Zidane的回答中的建议进行操作，并首先在控制器中定义我的对象，如下所示：

$scope.year = {};

var saveUser = function(user) {
   $scope.profilePromise = UserService.save(user);
console.log($scope.year);

这是模板：

<fancy-select
            title="Klassetrinn"
            model="year"
            options="years"
            enable="true"
            on-change="onChangeYears()"
            active="yearsActive"
            name="playerYear"
            form-name="registerForm"
          >
          </fancy-select>

但在这种情况下，我得到了一个空物体。

当我像这样定义我的对象时，我在控制器中获得了正确的值，但在视图中标题不再显示：

$scope.search = {
    years: []
  };

var saveUser = function(user) {
    $scope.profilePromise = UserService.save(user);
console.log($scope.search.years);

<fancy-select
            title="Klassetrinn"
            model="search.years"
            options="years"
            enable="true"
            on-change="onChangeYears()"
            active="yearsActive"
            name="playerYear"
            form-name="registerForm"
          >
          </fancy-select>

Answer 1

正如您为此指令定义了一个孤立的范围

scope: {
      ...
      model: '=',
      ...
    },

您为指令提供对控制器范围内对象的引用。声明像<fancy-select model="myModel" ....></fancy-select>这样的指令，您将指令传递给控制器上的scope.myModel。修改指令中scope.model对象上的属性时，会自动修改控制器中scope.myModel对象上的相同属性。

所以你必须这样做

myApp.controller('myController', function($scope) {
  ...
  $scope.myModel = {};
  ...
}

在您的控制器和指令中

if (!scope.multiple) {
  scope.model.value = value;
  return;
}

然后，您可以通过$scope.myModel.value获取控制器中的值。

为了澄清：您必须在控制器上定义一个对象，并将该对象的引用传递给该对象，以便该指令可以跟随引用并且不会屏蔽它。如果您在指令scope.model = 33中执行了操作，那么您只需屏蔽从控制器传递给它的引用，这意味着scope.model将不再指向控制器上的对象。当您执行scope.model.value = 33时，您实际上遵循对象引用并修改控制器范围上的对象。

Answer 2

您可以使用服务或工厂在角度应用程序部分之间共享数据，例如

    angular.module('myapp').factory('myDataSharing', myDataSharing);

function myDataSharing() {


    var sharedData = {
        fieldOne: ''
    };

    return {
        setData: setData,
        getData: getData,
    };


    function setData(dataFieldValue) {
        sharedData.fieldOne = dataFieldValue;
    };


    function getData() {
        sharedData.fieldOne
    };


    directive:
        myDataSharing.setData(dataValue);

    controller:
angular.module('myapp').controller('myController' ['myDataSharing'], function(myDataSharing) {
            var myDataFromSharedService = myDataSharing.getData();
        }

如何从Angular

2 个答案: