Javascript 使用transclude的AngularJS指令打破了$scope_Javascript_Angularjs_Angularjs Directive

Javascript 使用transclude的AngularJS指令打破了$scope

javascript angularjs

Javascript 使用transclude的AngularJS指令打破了$scope,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,我是新来安格拉斯的。我尝试使用选项transclude=true创建指令，但它似乎打破了$scope。这是我的密码： <!DOCTYPE html> <html ng-app="myApp"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script> <script

我是新来安格拉斯的。我尝试使用选项

transclude=true

创建指令，但它似乎打破了$scope。这是我的密码：

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
    <script type="text/javascript">
      var app = angular.module('myApp', []);

      app.controller('myController', ['$scope', function($scope){
        $scope.myText = 'Hello';

        $scope.facility = null;
        $scope.facilities = [
          {id:1, name:'One'},
          {id:2, name:'Two'},
          {id:3, name:'Three'}
        ];

        $scope.query = function(){
          console.log($scope.facility, $scope.myText);
        }
      }]);

      app.directive('ohMy', function(){
        return {
          transclude: true,
          template: function(){
            return '<form novalidate><div ng-transclude></div></form>';
          }
        }
      });

    </script>
  </head>
  <body>
    <div ng-controller="myController">
      <oh-my>
        <input type="text" ng-model="myText"></input>
        <div>{{myText}}</div>
        <select ng-change="query()" ng-model="facility" ng-options="f.name for f in facilities"></select>
      </oh-my>
    </div>
  </body>
</html>


var-app=angular.module（'myApp'，[]）；
app.controller（'myController'，['$scope'，函数（$scope）{
$scope.myText='Hello'；
$scope.facility=null；
$scope.facilities=[
{id:1，名称：'One'}，
{id:2，名称：'Two'}，
{id:3，名称：'Three'}
];
$scope.query=函数（）{
log（$scope.facility，$scope.myText）；
}
}]);
应用指令（'ohMy'，函数（）{
返回{
是的，
模板：函数（）{
返回“”；
}
}
});
{{myText}}

当我更改文本框值（myText）时，文本框下一个div中的文本显示了我预期的更新值。但当我使用下拉菜单时，浏览器的控制台总是显示默认值

当我删除此指令时，一切正常

创建指令时我做错了什么？有什么好办法吗

--更新--

在谷歌搜索了一段时间后，我找到了这个链接：并试图理解它，然后我修改了指令代码如下：

  app.directive('ohMy', function(){
    return {
      transclude: true,
      template: function(){
        return '<form novalidate><div ng-transclude></div></form>';
      },
      link: function(scope, element, attrs, ctrl, transclude) {
        transclude(scope, function(clone) {              
          element.children(0).empty().append(clone);
        });
      }
    }
  });

app.directive（'ohMy'，function（）{
返回{
是的，
模板：函数（）{
返回“”；
},
链接：函数（范围、元素、属性、ctrl、transclude）{
转移（范围、功能（克隆）{
element.children（0.empty（）.append（clone）；
});
}
}
});

现在，它正在按照我的预期工作。但是，有更好的解决方案吗？

您可以尝试从$parent范围获取模型：

      <oh-my>
        <input type="text" ng-model="$parent.myText"></input>
        <div>{{myText}}</div>
        // get model from $parent scope.
        <select ng-change="query()" ng-model="$parent.facility" ng-options="f.name for f in $parent.facilities"></select>
      </oh-my>


{{myText}}
//从$parent作用域获取模型。

链接演示：

是的，这是点规则。您的模型

设施

应嵌套在对象中。该指令生成一个子作用域，此时，您正在使用两个不同的

$scope.facility

属性，因为该值是一个原语。如果您执行

foo.facility

，则子作用域将继承

foo

，然后

facility

必须与两者相同。谢谢，m59！它正在和圆点一起工作。但正如你所说，这是“规则”，那么这是我们无法避免的吗？我的意思是此指令中的模型必须是嵌套对象？有些人假装$scope继承不存在，并在所有指令上放置隔离作用域，然后将数据显式传递给这些指令。谢谢，但不是：）-我不会更改HTML部分或控制器部分，我想修复该指令。