将参数从html指令传递给控制器

Question

我想将参数从html指令传递给控制器示例：

指示：

angular.module('app')
   .directive('helloWorld', function () {
  return {
      replace: false,
      restrict: 'AE',
      templateUrl: "./views/templates/helloWorld.html" 
  }
});

helloWorld.html：

<body ng-app="app" >
<div ng-controller="HelloWorldCtrl">
{{ welcome }}
</div>

hello.html：

<body ng-app="app">
<hello-world/>
</body>

HelloWorldCtrl：

angular.module('app')
.controller('HomeWorldCtrl', function ($scope, ) {

    $scope.welcome = "Welcome"

    };
})

我可以在hello.html中指定参数吗？

<hello-world param="param1"/>

那是传递给控制器吗？ 因此，在HomeWorldCtrl中，我可以检查参数的值吗？ 有没有更好的选择来实现这一目标？

谢谢，

Answer 1

app.directive('helloWorld', function(){
return {
  restrict:'E',
  scope: {
     param: '@'
  },
  template:'<div class="param"><h2>{{param}}</h3></div>'
};
});

// you have options to choose from

//= is two-way binding
//@ simply reads the value (one-way binding)
//& is used to bind functions

<hello-world="someParam"></hello-world>
//    for the scope definition:

scope: {
title: '@helloWorld'
}
The usage in the template will remain the same

<hello-world param="someParam"></hello-world>

Answer 2

如果您不使用隔离范围（范围：{someparam：“”}），则可以在指令模板中使用任何$ scope属性，而无需进行任何更改：

$scope.param = "new param value";
..
return {
  ..
  ,template: "<param>{{param}}</param>"

Answer 3

谢谢！

指示

   return {
      replace: false,
      restrict: 'AE',
      templateUrl: "./views/templates/PatientSearchEdit.html",
      scope: {
          param: '@'
      }
  }

控制者

console.log($scope.param);

确实记录指定的值。 非常感谢你！

将参数从html指令传递给控制器

问题描述

3 个解决方案

解决方案1
0 已采纳 2016-03-09 14:25:04

解决方案2
0 2016-03-09 14:37:16

解决方案3
0 2016-03-09 15:03:42

将参数从html指令传递给控制器

问题描述

3 个解决方案

解决方案1 0 已采纳 2016-03-09 14:25:04

解决方案2 0 2016-03-09 14:37:16

解决方案3 0 2016-03-09 15:03:42

解决方案1
0 已采纳 2016-03-09 14:25:04

解决方案2
0 2016-03-09 14:37:16

解决方案3
0 2016-03-09 15:03:42