Javascript AngularJS隔离范围指令

我在Angular应用程序上设置指令的隔离范围时遇到问题：

这是我的

app.js

：

var app = angular.module('myApp', []);

app.controller('mainController', ['$scope', function($scope) {
    if ($scope.name == 'bob') {
        console.log("It's bob")
    }else if ($scope.name == 'joe') {
        console.log("It's joe")
    }else if ($scope.name == 'mary') {
        console.log("It's mary")
    }
}]);

app.directive('test', function() {
    return {
        restrict : 'E',
        replace : true,
        templateUrl :  'test.html',
        scope: {
            name : '@'
        }
        controller : 'mainController'
    };
});

（

Main.html

）看起来像这样：

<div ng-controller="mainController">
      <div>
          /* This is where I set the name in the directive */
          <test name="bob"></test>
      </div>      
</div>

现在由于某种原因，当我运行上面的

HTML

code时，我的主控制器中不会出现任何打印语句

---

如果我在

指令

中设置了一个自定义范围对象，这是否意味着指令

测试

无法访问

主控制器

，它是我在

控制器

键下传入指令的控制器。

您在那里使用了一些递归。使用

test

时，同样在模板中再次使用

mainController

制作一个主html文件，在那里使用

mainController

，从test.html中删除

ng controller=“mainController”

，并从指令中删除

controller:'mainController'

，然后重试

---

另外，请为我们制作一个plunker

首先，您使用的是用于单向绑定的

名称：'@'

，即仅当您要使用双向绑定时，更改才会在该指令范围内。您需要使用

名称：'='

如果您使用'@'将属性绑定到范围，则基本上会查找字符串

因此，您必须使用以下两者的组合：

name : '@'
<test name={{obj.name}}></test>

名称：'@'

或

名称：'='

@binding用于传递字符串。这些字符串支持{{} 插值表达式。例如：。插值 表达式根据指令的父范围求值

=binding用于双向模型绑定。父范围中的模型链接到指令隔离范围中的模型。更改为1 模型影响另一个，反之亦然

请在下面找到一个工作代码示例-带有链接

查看

var app = angular.module('app', [])


app.directive('test', function() {
  return {
    restrict: 'E',
    scope: {
      name: '@'
    },
    controller: 'nameController',
    template: '<div>{{name}}</div>'

  }
})


app.controller('nameController', ['$scope', function($scope) {
  if ($scope.name == 'bob') {
    console.log("It's bob")
  } else if ($scope.name == 'joe') {
    console.log("It's joe")
  } else if ($scope.name == 'mary') {
    console.log("It's mary")
  }else {
    console.log("It's someone else")
  }
}]);

var-app=angular.module（'app'，[]）
应用指令（'测试'，函数（）{
返回{
限制：'E'，
范围：{
姓名：'@'
},
控制器：“nameController”，
模板：“{name}}”
}
})
app.controller（'nameController'，['$scope'，函数（$scope）{
如果（$scope.name=='bob'）{
log（“是鲍勃”）
}else if（$scope.name=='joe'）{
log（“我是乔”）
}else if（$scope.name=='mary'）{
console.log（“我是玛丽”）
}否则{
log（“是其他人”）
}
}]);

---

如果我从指令中删除

controller:'mainController'

，请看一下Hello，它如何知道console.log语句在

mainController

controller中？daan给了你完整的答案，正是我的意思。他给出了一个非常全面的答案。但我意识到你说的话和我的错误。谢谢。Hello@daan，我刚刚意识到我不再使用ng repeat，只是想在HTML中将名称传递给指令，然后根据我传递给指令的名称的值，它应该console.log正确的名称。很抱歉给你带来了困惑。我在我的帖子中尝试了上面更新的代码，但它似乎仍然不起作用。在这种情况下，请看一看。这能解决你的问题吗？这正是我所需要的，非常感谢你，代码正在运行！

name : '='
<test name=obj.name></test>

var app = angular.module('app', [])


app.directive('test', function() {
  return {
    restrict: 'E',
    scope: {
      name: '@'
    },
    controller: 'nameController',
    template: '<div>{{name}}</div>'

  }
})


app.controller('nameController', ['$scope', function($scope) {
  if ($scope.name == 'bob') {
    console.log("It's bob")
  } else if ($scope.name == 'joe') {
    console.log("It's joe")
  } else if ($scope.name == 'mary') {
    console.log("It's mary")
  }else {
    console.log("It's someone else")
  }
}]);