Question

我正在使用AngularJS 1.5.3。我有一个用例，我在另一个中调用一个指令。换句话说，指令是链接的。我希望根据inner指令的结果更新我的外部指令上的作用域变量。我在这里创建了一个JSFiddle：http://jsfiddle.net/gstanek/6voytwuc/30/，它显示了我尝试过的内容。

这里复制相同的代码：

<div ng-app="myApp" ng-controller="MyCtrl">
    <span first-layer-directive first-layer-info="'fist layer text'"></span>
</div>

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

myApp.controller('MyCtrl', function($scope) {

});

myApp.directive('firstLayerDirective', function() {
    return {
        scope: {
            firstLayerInfo: '='
        },
        template: "<div><span>1st Layer Displayed info='{{firstLayerDisplay}}'</span></div>" +
        "<div>" +
        "<span second-layer-directive second-layer-info=\"'second layer text'\" info=\"info\">Second layer displayed info='{{secondLayerDisplay}}'</span></div>" + "<span>Info returned from 2nd layer: {{info}}</span>",
        link: function (scope, element, attrs) {
            scope.firstLayerDisplay = scope.firstLayerInfo;
            scope.info = '';
        }
    };
});

myApp.directive('secondLayerDirective', function() {
    return {
        scope: {
            secondLayerInfo: '=',
            info: '='
        },
        template: "<div><span>2nd Layer Displayed info='{{secondLayerDisplay}}'</span></div>",
        link: function (scope, element, attrs) {
            scope.secondLayerDisplay = scope.secondLayerInfo + ' plus more info';
            scope.info='info generated in 2nd layer';
        }
    };
});

运行此JSFiddle的输出是：

1st Layer Displayed info='fist layer text'
2nd Layer Displayed info='second layer text plus more info'
Info returned from 2nd layer:

相反，我希望最后一行显示以下内容： Info returned from 2nd layer: info generated in 2nd layer

如何将数据从内部指令传递回外部指令并确保使用新值更新外部指令？

Answer 1

您可以从外部指令访问内部指令的范围。所以只需从firstLayerDirective的链接功能中删除以下行。

scope.info = '';

如果我理解你的问题是正确的话，你会通过这样做得到你的结果。

Answer 2

<强>更新正如OP指出的那样，原始解决方案＆＃34;工作＆＃34;但它确实不正确。我相信这种情况发生的原因是因为内联模板与链接函数一起编译的方式。如果您更改链接功能以使用preLink它似乎工作。

link: {
          pre: function (scope, element, attrs) {
            scope.firstLayerDisplay = scope.firstLayerInfo;
            scope.info = '';
            }
        }

原始答案

为了解决这个问题，你需要使用所谓的＆＃34;点符号＆＃34; （请参阅此处以获取解释http://jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html）。

如果您将父指令更改为下面的代码，则应解决您遇到的问题......

myApp.directive('firstLayerDirective', function() {
    return {
        scope: {
            firstLayerInfo: '='
        },
        template: "<div><span>1st Layer Displayed info='{{firstLayerDisplay}}'</span></div>" +
        "<div>" +
        "<span second-layer-directive second-layer-info=\"'second layer text'\" info=\"info.text\">Second layer displayed info='{{secondLayerDisplay}}'</span></div>" + "<span>Info returned from 2nd layer: {{info}}</span>",
        link: function (scope, element, attrs) {
            scope.firstLayerDisplay = scope.firstLayerInfo;
            scope.info.text = '';
        }
    };
});

我所做的唯一改变是改变＆＃34; scope.info =＆＃39;＆＃39;＆＃34;＆＃34;到＆＃34; scope.info.text =＆＃39;＆＃39;＆＃34;然后传递＆＃34; info.text＆＃34;到html中的child指令。

如果您有任何问题，请与我们联系。

Answer 3

您需要的是There were invalid base64 characters in the input text. Valid base64 characters are A-Z, a-z, 0-9, NaNExpect errors in decoding.。

我为你做了一个例子，看看this

这里复制相同的代码：

<div ngf-drop ngf-select ng-model="file" class="drop-box" 
   ngf-drag-over-class="'dragover'" ngf-multiple="false" 
   ngf-allow-dir="false" accept="image/jpeg,image/jpg,image/png" 
   ngf-pattern="'image/jpeg,image/jpg,image/png'" 
   ngf-resize="{width: 100, height: 100, quality: .8, centerCrop: true, type: 'image/png'}">

ng-transclude

AngularJS：带有引用指令和数据绑定的模板的指令

3 个答案: