Question

我无法理解如何将我的范围对象从指令传递给模板，我需要更改背景我的div，我喜欢这样：

var app = angular.module('comments', []);
app.controller('fooCtrl', function($scope){
    $scope.bg= {};
})

app.directive('foo', function ($rootScope) {
    return {
        link: function (scope, element, attrs) {
            element.bind('click', function(){
                scope.bg= {background: 'blue'};  
            });
        }
    };
});

和

<div ng-app="comments">
    <div ng-controller="fooCtrl">
        <foo>foo</foo>
        <foo>foo</foo>
        <foo>foo</foo>
        <foo>foo</foo>
        <div id="form" ng-style="bg"></div>
    </div>
</div>

但这不起作用。

这可能是一个非常有趣的问题，我的代码很糟糕，但它是我的第一个Angular应用程序。希望得到你的帮助。

Answer 1

您可以在指令中使用controller属性将当前控制器作用域传递给指令，然后更改控制器的值并使用$ timeout将值更新回原始控制器。请检查样本

angular.module('testApp', [])
            .directive('foo', function($timeout) {
                return {
                    restrict: "E",
                    scope: {
                        controller: '=',
                        color: '@'
                    },
                    link: function(scope, element, attrs) {
                        element.bind('click', function() {
                            $timeout(function() {
                              scope.controller.bg = {
                                   background: scope.color
                               };
                            });
                        });
                    }
                };
            })
            .controller('AppCtrl', function () {});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="testApp">
    <div ng-controller="AppCtrl as vm">
      <foo controller="vm" color="red">foo</foo>
      <foo controller="vm" color="black">foo</foo>
      <foo controller="vm" color="blue">foo</foo>
      <foo controller="vm" color="yellow">foo</foo>


        <div id="form" ng-style="vm.bg">
            {{vm.bg.background}}
        </div>
    </div>
</body>

Answer 2

最好这样试试

<强> HTML

<foo data-method="ctrlFn">foo</foo>
        <foo data-method="ctrlFn">foo</foo>
        <foo data-method="ctrlFn">foo</foo>
        <foo data-method="ctrlFn">foo</foo>
        <div id="form" ng-style="bg" >{{bg.background}}</div>

<强> JS

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
          $scope.bg= {};
          $scope.ctrlFn = function(arg) {  
        $scope.bg = arg;
        $scope.$apply();
    }
});


app.directive('foo', function() {
    return {
        restrict: 'E',
        scope: {
            fromDirectiveFn: '=method'
        },
        link: function(scope, elm, attrs) {
          elm.bind("click", function(e){
         var bg= {background: 'blue'}; 
            scope.fromDirectiveFn(bg);
       });
        }
    }
});

指令中的

data-method =“ctrlFn”使用该指令创建名为fromDirectiveFn的作用域名称，您可以调用控制器函数ctrlFn for ref https://plnkr.co/edit/XLtahJNwTDP2T3s8Gok0?p=preview

如何将范围从指令传递到模板

2 个答案: