javascript - Angular JS - 文本框未在独立范围内更新

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 中定义您的模板。 您必须使用 ng-transclude 并将指令的隔离范围添加到链接中的嵌入，并将具有隔离范围的 transcludedElement 添加到指令元素中。

这个blog post里面有很好的描述关于它。

请查看下面或此 fiddle 中的演示.

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);
      });
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<div ng-controller="attrScope" ng-app="isolatedScopeApp">
  <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>