Question

我正在尝试修复我的范围，以便如果我复制我的指令它仍然可以工作。现在我有以下程序流程： 1.控制器创建一个名为prefix的变量，并用值（JOE）填充它。 2.该指令提示用户输入后缀（比如DOE），然后连接前缀和后缀。 3.然后控制器显示连接值（JOEDOE）。

这是我的HTML：

<div ng-controller="cntrl">
    <div>Prefix: {{prefix}}</div>
    <div >Concatenated value: {{concatenatedName}}</div>
    <!--Below is the directive-->
    <div entering="{{prefix}}" joinit></div>
</div>

这是我的代码：

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

myMod.controller('cntrl', function ($scope) {
    $scope.prefix="JOE";
    $scope.concatenatedName="";
    $scope.concatenate = function (param) {
        $scope.concatenatedName=param;
    };
});

myMod.directive('joinit', function () {
return {
    restrict: 'A',
    template: "<div>Suffix: <input type='text' id='suffix'/>" +
    "<button ng-click='click()'>Concatenate</button> </div>",
    controller: function($scope, $element){
      $scope.click = function(){
        var concatVar = $element[0].attributes[0].value + 
                    document.getElementById('suffix').value;
        $scope.concatenate(concatVar);
      }
    }
};
});

代码工作正常并提供了指令应该能够执行的基本功能的简单示例：它提示用户输入，输入与控制器数据组合并返回到控制器以供显示或持久化（通过服务）。麻烦的是这个指令不能重复。如果我隔离范围（如范围：{}，则）指令不再具有$ scope的访问权限。

这是一个工作示例的链接（它在jsfiddle中不起作用，所以我把它放在我自己的服务器上）：

http://icarus.cs.weber.edu/~lfernandez/angular/ang.html

Answer 1

我没有对此进行测试，它可能很粗糙......但是你的答案是一个孤立的范围：

myMod.directive('joinit', function () {
return {
restrict: 'A',
scope:{suffix:'='},
template: "<div>Suffix: <input type='text' ng-model='suffix_value'/>" +
"<button ng-click='click()'>Concatenate</button> </div>",
controller: function($scope, $element){
  $scope.click = function(){
    $scope.suffix = angular.copy($scope.suffix_value);
  }
}
};
});

现在你看到我们只是在点击时设置后缀，感谢ng-model我们不需要任何其他元素。

现在将某些内容传递给后缀，以便它可以发挥其魔力

<div suffix="someSuffix" joinit></div>

现在，在您的父控制器中，您可以使用someSuffix

执行任何操作

$scope.concatenate = function (whatever) {
  return $scope.prefix + whatever;
}

现在

{{concatenate(someSuffix)}}

将返回您的期望。

旁注：如果你遇到jsFiddle问题，请尝试plnkr.co,在编辑器中预先构建一个角度应用模板。如果您仍然无法在plnkr中发布代码，也许我可以提供帮助。

Angularjs：修复范围，因此可以复制指令

1 个答案: