Question

我创建了自定义角度指令。举个例子：

自定义指令：

var app=angular.module('app',[]);
app.directive('customDirective',function(){
return{
   restrict:A,
   controller:customDirectiveController,
   scope:{
         someArray:"="
         }
   }
})

自定义指令控制器：

app.controller('customDirectiveController',function(scope){
    scope.someArray=[];
    scope.someArray.push(1);
    scope.someArray.push(2);
    scope.someArray.push(3);
});

家长控制器：

app.controller('parentCtrl',function($scope){
    $scope.result=[];
});

HTML：

<div data-ng-controller="parentCtrl">
  <div data-custom-directive="result">
</div>

如何从custom指令中将someArray的值变为Parent控制器（父控制器中的结果变量应该与自定义指令控制器中的someArray相同）？

这是jsfiddle http://jsfiddle.net/mehmedju/RmDuw/302/ 感谢

Answer 1

我们只是说你正在使用tempController 所以你的代码应该是

app.controller('tempController', function($scope) {
    scope.someArray = []
});

Html代码是

<div ng-controller="tempController">
   <div custom-directive some-array="someArray">
</div>

Answer 2

您可以在数组上应用'$ watch'，如下所示：

在控制器中：

app.controller('MainCtrl', function($scope) {
    $scope.someArray = [];
})

在HTML中：

<div custom-directive arr="someArray">
</div>

在指令中：

app.directive('customDirective', function(){
    return {
        scope: {
           arr: '='
        }
    }
    link: function(scope, element, attrs) {
        scope.$watch('arr', function(newVal, oldVal) {
            //do your array manipulation here
        }
    }
})

或者，如果您只想发回数据，可以使用以下方法：

在控制器中，创建一个接受指令返回值的函数，例如：

app.controller('MainCtrl', function(){
    $scope.watchVal = function(val) {
        //do array manipulation
        $scope.apply(); //to update the scope
    }
})

在HTML中：

<div custom-directive data-method="watchVal">
</div>

在指令中：

app.directive('customDirective', function(){
    return {
        scope: {
            sendVal: '&method'
        },
        link: function(scope, element, attrs){
           scope.updateVal = function(){
               var func = scope.sendVal();
               func(scope.someArray);
           }
        }
    }
})

Answer 3

你这里有一篇关于观察者的非常有趣的文章 http://teropa.info/blog/2014/01/26/the-three-watch-depths-of-angularjs.html

您需要使用watchCollection

并且，如果您正在播放创建数组并更改指令内的引用，则可能会丢失观察者内部的引用。这意味着不要创建o更改内部的数组引用。

另一个有趣的方法是使用ngModel http://jsfiddle.net/ta66J/

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

function MyCtrl($scope) {
    $scope.formVals = {
        dirVals: [
            {val: 'one'},
            {val: 'two'}
        ]
    };
}

app.directive('dir', function($compile) {
    return {
        restrict: 'E',
        compile: function(element, attrs) {
            var html = "<input id='inputId' type='text' ng-model='" + attrs.dirModel + "' />";
            element.replaceWith(html);
            return function(scope, element, attrs, ngModel) {
                $compile(angular.element(element))(scope);
            };
        },
    };
});

jsfidler来自这个有趣的线程： https://groups.google.com/forum/#!topic/angular/QgcRBpjiHAQ

Answer 4

这是固定的问题。

 <div custom-directive="" data-some-array="result"></div>    {{result}}

[http://jsfiddle.net/mehmedju/RmDuw/304/][1]

将数据从custom指令传递到父控制器

4 个答案:

或者，如果您只想发回数据，可以使用以下方法：