如何將值從指令傳遞給控制器

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-如果您的范圍是孤立的范圍，則可以創建一個服務，您可以更新該服務並將其與您的控制器共享，並且您的控制器可以監視該服務中的值並采取相應的措施。

3-如果您的范圍是隔離范圍，則將數據傳遞回另一種方法是將一種方法分配給您的指令范圍，並且您可以從該指令執行該方法並將數據傳遞給控制器，這是您需要注意的一個技巧這種情況是從指令調用方法時，您必須重寫該函數的參數。

編輯：

由於第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代碼

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>

代碼筆演示鏈接

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>'
  };
});

看看這個矮人

演示

如何將值從指令傳遞給控制器

問題描述

3 個解決方案

解決方案1
2 已采納 2015-12-15 05:18:52

解決方案2
1 2015-12-15 05:19:31

解決方案3
1 2015-12-15 05:28:36

如何將值從指令傳遞給控制器

問題描述

3 個解決方案

解決方案1 2 已采納 2015-12-15 05:18:52

解決方案2 1 2015-12-15 05:19:31

解決方案3 1 2015-12-15 05:28:36

解決方案1
2 已采納 2015-12-15 05:18:52

解決方案2
1 2015-12-15 05:19:31

解決方案3
1 2015-12-15 05:28:36