Question

在我的JS文件中：

var app=angular.module("isolateScope",[]);

app.controller("attrScope",["$scope",function($scope){
    $scope.gem="ruby";    
}]);

app.directive("diffScope",function(){
   return{
       scope:{
           gemType:'@',
           twoWay:'=',
       },
       //template:'@scope:<input type="text" ng-model="gemType"/><br/><label>=Scope</label><input type="text" ng-model="twoWay"/>'
   } 
});

在我的HTML文件中：

 <div ng-controller="attrScope">
        <input type="text" ng-model="gem" />
        <div class="panel-group">
            <diff-scope gem-type="{{gem}}" two-way="gem">
                @scope:<input type="text" ng-model="gemType"/><br/><label>=Scope</label><input type="text" ng-model="twoWay"/>
                </diff-scope>
        </div>
    </div>

但是当输入父文本框时，子文本框没有更新，也没有使用父文本框中的值加载？

Answer 1

你不能像你一样在你使用你的指令的html中定义模板。在这种情况下，您必须使用transclusion，这样您就可以在指令的模板和子元素中定义html内容。

定义指令时，必须指定template或templateUrl属性（就像您所做的那样，但将其注释掉）。即，在此模板中，您的范围属性将被传递并变为可用。

使用工作解决方案检查您的plunker的this叉。

Answer 2

您可以在html中定义模板。您必须使用> (define proc (+ 1 1)) > proc 2 > (proc) . . application: not a procedure; > (define (proc) (+ 1 1)) > proc #<procedure:proc> > (proc) 2并将指令的隔离范围添加到链接中的transclusion中，并将具有隔离范围的transcludedElement添加到指令元素。

此blog post中有一个非常好的描述。

请查看下面的演示或此fiddle。

ng-transclude

var app = angular.module("isolatedScopeApp", []);

app.controller("attrScope", ["$scope",
  function($scope) {
    $scope.gem = "ruby";
  }
]);

app.directive("diffScope", function() {
  return {
    scope: {
      gemType: '@',
      twoWay: '=',
    },
    transclude: true,
    link: function(scope, element, attrs, ctrl, transclude) {
      transclude(scope, function(clone, scope) {
        element.append(clone);
      });
    }
  }
});

Angular JS - 文本框未在隔离范围中更新

2 个答案: