Question

任何人都可以给我一个关于如何在指令和控制器之间交换数据的简单示例。我是angularjs的新手，我想学习如何将数据从cotroller传递到指令然后再回到控制器。我已经学会了如何将值从控制器传递给指令，但问题是我无法实现从指令返回控制器的值。可以帮助

html代码

 <div ng-controller="MyCtrl">
<pass-object obj="obj"></pass-object>
 </div>

javascript代码

 var myApp = angular.module('myApp',[]);

 myApp.directive('passObject', function() {
return {
    restrict: 'E',
    scope: { obj: '=' },
    template: '<div>Hello, {{obj.prop}}!</div>'
};
});

myApp.controller('MyCtrl', function ($scope) {
$scope.obj = { prop: "world" };
});

Answer 1

您通过以下某些选项实现了这一目标：

1-如果您的范围是共享范围，那么您的指令可以直接访问和更改父范围数据。

2-如果您的作用域是隔离作用域，您可以创建一个可以更新并与控制器共享的服务，并且您的控制器可以观察该服务中的值并采取相应的行动。 / p>

3-如果您的范围是隔离范围，另一种传递数据的方法是为您的指令范围分配一个方法，并从指令中执行该方法并将您的数据传递给控制器，这是您需要支付的一个技巧注意，在这种情况下，当你从指令中调用方法时，你必须覆盖该函数的参数。

编辑：

由于这一点并不简单，这段代码应该给你一个起点。

(function(){
  angular.module("app", [])
  .directive("passObject", function(){
    return {
      restrict : "E",
      template: "<input type='button' ng-click='notifyParent()' value='Notify Parent'></input>",
      scope : {
        dirParam : "&func"
      },
      controller: function($scope){
        $scope.notifyParent = function(){
        if($scope.dirParam){
          $scope.dirParam({p1 : 10})
        }          
        }
      }
    }
  })
  .controller("mainCtrl", function(){
    var vm = this;

    vm.myFunc = function(p1){
      console.log("This alert is in the main controller, and the value " + p1 + ", I got from the directive");
      alert(p1);
    }
  });
})();

Html代码：

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-controller="mainCtrl as ctrl">
    <pass-object func="ctrl.myFunc(p1)">

    </pass-object>


  </body>

</html>

希望有所帮助。

Answer 2

您可以使用链接功能

使用相同的范围变量

js code

var myApp = angular.module('myApp', []);
myApp.directive('passObject', function() {
  return {
    restrict: 'E',
    scope: {
      obj: '='
    },
    template: '<div>Hello, {{obj.prop}}! <button ng-click="changeValue()">Change Value</button></div>',
    link: function(scope, element, attrs) {
      scope.changeValue = function() {
        scope.obj.prop = "Change form directive";
      }
    }
  };
});

myApp.controller('MyCtrl', function($scope) {
  $scope.obj = {
    prop: "world"
  };
});

html代码

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <pass-object obj="obj"></pass-object>
    <div>
      Controller {{obj.prop}}
    </div>
  </div>
</div>

code pen演示链接

Answer 3

如果将隔离范围变量定义为'='，则它已经双向绑定。

app.directive('passObject', function() {
  return {
    restrict: 'E',
    scope: {
      obj: '='
    },
    template: '<div>=====Inside directive===== <br/> Hello, {{obj.prop}}! <br/><input type="text" ng-model="obj.prop"/></div>'
  };
});

看看这个plunker

demo

如何将值从指令传递给控制器

3 个答案: