Question

我在angularjs中使用指令概念将数据变量从控制器传递给directive.i正在写一个html页面和控制器，指令在angularjs中。

的test.html：

<div ng-controller="myController"
      data-angular-treeview="true"
      data-tree-model="roleList"
      data-node-id="roleId"
      data-tree-id="mytree"
      data-node-label="roleName"
      data-node-children="children" 
      data-ng-click="selectNode(currentNode)"
      >
    </div>

testcontroller.js：

(function(){
    app.controller('myController', function($scope,$http,TreeService){
        $scope.selectNode=function(val)
        {
            $scope.nodeval=val.roleName;
            alert("select:"+$scope.nodeval);
        };
  });

})();

testdirective.js：

app.directive('tree1', function($rootScope) {
    function compile(scope, element, attributes) {
        return {
                post:function(scope, iElement, iAttrs) {

                    iElement.bind('click', function() {
                        alert("click: "+scope.node);
                    });
                }
        };
    }

    return {
        compile: compile,
        scope: {

         },
           restrict: 'AE',
    };
});

这里我在testcontroller.js中获取选定的节点名称，但我想在我的指令中传递那个节点名称，所以请建议我如何做到这一点。感谢

Answer 1

我要做的是在指令隔离范围内定义一个如下属性：

scope: {
    node: '='
}

在视图控制器内部有一个初始化为$ scope.node = {}的节点;并且使用click事件将本地$ scope.node的值更改为您感兴趣的节点，并且当指令接收到视图控制器内的$ scope.node属性的引用时，它将自动更新自身

Answer 2

<div test-directive node-value="node"></div>

隔离范围指令：

directive('testDirective', function(){
    return {
        restrict: 'EA',
        scope: {
            nodeValue: '='
        },
        link: function(scope, element, attrs){
           console.log(scope.nodeValue);
       }
}

访问控制器范围：

directive('testDirective', function(){
    return {
        restrict: 'EA',
        link: function(scope, element, attrs){
           console.log(scope.$eval(attrs['nodeValue']));
       }
}

如何使用angularjs中的click事件将变量从控制器传递到指令

2 个答案: