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

任何人都可以給我一個關於如何在指令和控制器之間交換數據的簡單示例。我是angularjs的新手，我想學習如何將數據從cotroller傳遞到指令，然後返回到控制器。我已經學會了如何從控制器傳遞價值的指令，但poblem是我無法實現從指令值回控制器..can有人幫助如何將值從指令傳遞到控制器

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

來源

2015-12-15 user3415447

一種方法是具有指令和控制器之間的共享服務。由於服務是單例，數據將持續到兩個對象。請參閱此計算器：http://stackoverflow.com/questions/25370582/share-data-between-a-directive-and-a-controller-in-different-modules。 –

你實現，通過像一些選項：

1如果你的範圍得到共享範圍，那麼你的directiv e可以直接訪問和更改父範圍數據。如果您的範圍是隔離範圍，您可以創建一個服務，您可以更新該服務並將其與您的控制器共享，並且您的控制器可以觀察該服務中的值並採取相應的行動。如果你的範圍是隔離的作用域，另一種傳回數據的方法是給你的指令作用域分配一個方法，然後從指令中你可以執行該方法並將你的數據傳遞給控制器，你需要一個技巧在這種情況下請注意，當您從指令中調用方法時，必須重寫該函數的參數。

編輯：

因爲那點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="[email protected]" 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>

希望有所幫助。

來源

2015-12-15 05:18:52

則可以使用鏈路功能

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>

code pen演示鏈接

來源

2015-12-15 05:19:31 vpsingh016

如果定義分離的範圍變量作爲'='，它已經是雙向綁定了。

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

來源

2015-12-15 05:28:36 Jackie

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

回答

相關問題