2013-04-21 59 views
19

指令如何從具有某些參數的控制器調用某個功能?通過指令調用控制器功能參數

我會給變量myVar的範圍。$ apply(attrs.whattodo);;

HTML:

<div ng-app="component"> 
    <div ng-controller="ctrl"> 
    <span ng-repeat="i in myarray"> 
    <span customattr whattodo="addVal">{{i}}</span> 
    </span> 
    </div> 

控制器JS:

function ctrl($scope) { 
     $scope.myarray = [1]; 
     $scope.addVal = function (value) { 
      $scope.myarray.push(value); 
     } 
    } 

指令JS:

angular.module('component', []).directive('customattr', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      var myVar = 5; 
      scope.$apply(attrs.whattodo); 
     } 
    }; 
}); 

回答

17

這裏的工作方法之一:

你必須在這個範圍內綁定屬性與功能型示波器型號。所以,當你在其他(指令)需要你可以執行該SOPE

HTML

<body ng-controller="MainCtrl"> 
    Value: {{value}}! 

    <button customattr whattodo="addValue">Add</button> 
</body> 

JS

angular.module('component', []) 

.controller('MainCtrl', function($scope) { 
    $scope.value = 1; 

    $scope.addValue = function(val){ 
    alert(val); 
    $scope.value = val; 
    } 
}); 

.directive('customattr', function() { 
    return { 
     restrict: 'A', 
     scope: { 
      whattodo: "=" // or ' someOtherScopeName: "=whattodo" ' 
     }, 
     link: function (scope, element, attrs) { 
      var myVar = 5; 
      scope.whattodo(myVar); // or ' scope.someOtherScopeName(myVar) ' 
     } 
    }; 
}); 

這裏是code on plunker

fromAngularJS: Directives

= or =attr - set up bi-directional binding between a local scope property and the parent scope property of name defined via the value of the attr attribute. If no attr name is specified then the attribute name is assumed to be the same as the local name. Given and widget definition of scope: { localModel:'=myAttr' }, then widget scope property localModel will reflect the value of parentModel on the parent scope. Any changes to parentModel will be reflected in localModel and any changes in localModel will reflect in parentModel

+0

非常感謝。最後一件事:我給的例子是一個愚蠢的例子。但是用我的「真實」例子:這個值是我用一些輸入文本呈現的一系列字典。如果我把空的範圍或範圍,所有我的輸入字段變空。任何想法爲什麼?謝謝 – JohnCastle 2013-04-21 21:34:26

+0

老實說很難想象它,將你的真實世界變成笨蛋並不複雜嗎?謝謝 – Maksym 2013-04-21 21:37:22

+0

當然!這裏是:http://plnkr.co/edit/mu9DM1dEyZ36UqVvw0DM 只需在指令中將範圍設置爲true,您將在其中看到「Toto」。或 – JohnCastle 2013-04-22 06:36:43

10
在HTML

whattodo="addVal(value)" 

在指令

scope.$apply(function(s){ 
    s.whattodo({value : myVar}); 
}); 
+0

我:類型錯誤:對象#的特性 'whattodo' 不是一個功能? – JohnCastle 2013-04-21 21:09:45

+0

對不起。我糾正了它。應該是s.whattodo – Ketan 2013-04-21 21:41:19

+0

非常有趣,並且效果很好([demo](http://jsfiddle.net/BinaryMuse/rhXDs/))。經過一番思考,同樣的事情必須用在像'

2

爲什麼不使用隔離範圍中的「&」符號?

<body ng-controller="MainCtrl"> 
    Value: {{value}}! 
    <button customattr add-val="addValue(value)">Add</button> 
</body> 

在控制器:

function ctrl($scope) { 
     $scope.myarray = [1]; 
     $scope.addValue = function (value) { 
      $scope.myarray.push(value); 
     } 
    } 

而且在指令:

angular.module('component', []).directive('customattr', function() { 
    return { 
     restrict: 'A', 
     scope: { 
      addVal: "&" 
     }, 
     controller: function ($scope) { 
      var myVar = 5; 
      // To execute addVal in controller with 'value' param 
      $scope.addVal({value: value}) 
     } 
    }; 
}); 
+1

在使用addVal的指令中,改用whattodo – userRaj 2015-11-19 10:53:18