当前位置: 代码迷 >> JavaScript >> 在指令中将带参数的作用域函数从控制器分配给var
  详细解决方案

在指令中将带参数的作用域函数从控制器分配给var

热度:37   发布时间:2023-06-06 09:23:50.0

也许标题并不完美-但我不久将解释:

在我的HTML我使用的是ng-click指令:(我在HTML代码中使用了几个具有不同参数(例如“ main”,“ action”,“ more”等)的ng-clicks指令。

ng-click="clickMe('main')"

我有一个控制器来获取id - 'main'

.controller('clickCtrl', ['$scope', function ($scope) {
    $scope.clickMe= function (id) {
        console.log("button: " + id);
    }
}]);

我想在我的指令链接函数中分配$scope.clickMe并获取传递的id值:

.directive('clickDir', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var click = scope.clickMe;

            click = function(id) {      //can I get the "id" here from controller also? 
                //some stuff
            }
    }}});

但这不起作用,您能帮我吗?

编辑

HTML中的一些代码:

<div class="my-navbar">
    <ul click-dir>
        <li>
            <a ng-click="clickMe('main')" href="..." class="..."></a>
        </li>
    </ul>
</div>

<div class="action-navbar">
    <ul click-dir>
        <li ng-repeat="..."> //a lot of <li> generated by ng-repeat
            <a ng-click="clickMe('actions')" href="..." class="..."></a>
        </li>
    </ul>
</div>

<div class="search-navbar">
    <ul click-dir>
        <li ng-repeat="..."> //a lot of <li> generated by ng-repeat
            <a ng-click="clickMe('search')" href="..." class="..."></a>
        </li>
    </ul>
</div>

我想从click-dir指令中的ng-click获取id参数,因为我想进行一些DOM操作。

如果您只想处理指令中的click事件,则可以直接执行此操作,而无需使用ng-click 像这样:

link: function (scope, element, attrs) {
    // get "id" from attrs or declare it in your directive config in scope
    element.on('click', function() {
        // use "id" here...
    });
}

如果“ id”参数是一个简单的字符串,则可以执行以下操作:

scope: {
    clickDir: '@'
},
link: function (scope, element, attrs) {
    element.on('click', function() {
        // use scope.clickDir here...
    });
}

HTML将变成:

<a click-dir='main'>...</a>

(同样,假设除了从HTML传递常量“ id”值之外,实际上不需要合并控制器/外部范围和指令。)

您可以使用角度绑定,它允许指令的隔离范围将值传递到父范围,以便在属性中定义的表达式中求值,在本例中,我们定义了click属性。

因此,您可以将函数定义到Controller中,并将其绑定到指令。

控制者

(function(){

function Controller($scope) {

  $scope.click = function(id){
    console.log('button : ' + id)
  }


}

angular
.module('app', [])
.controller('ctrl', Controller);

})();

指示

(function(){

  function clickDir() {
    return {
        restrict: "A",
        scope: {
          //Use '&' binding to evaluate expression
          click: '&'
        },
        link: function(scope, element, attr){
          //Listen for click event
          element.on('click', function(){
            //Call click controller function
            scope.click();
          });
        }
    };
  }

angular
  .module('app')
  .directive('clickDir', clickDir);


})();

的HTML

  <body ng-app="app" ng-controller="ctrl">

    <button type="button" click-dir click="click('tata')">button</button>
    <button type="button" click-dir click="click('toto')">button2</button>
    <button type="button" click-dir click="click('titi')">button3</button>


  </body>
  相关解决方案