我在识别 View 更新时遇到了一些困难，无论是在 $scope 上设置属性还是在 Controller 原型(prototype)上设置属性时，该 View 更新都没有发生。
我已经创建了一个快速example我正在做什么来说明这个问题。
例如，我有以下观点:
<html data-ng-app="test">
<head>
<script data-require="angular.js@1.2.18" data-semver="1.2.18" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div data-catalog="{ 'type': 'Category1', 'key': '252' }">
<span class="text-danger">{{query | json}}</span>
<span class="text-danger">{{catalog.model | json}}</span>
</div>
</body>
</html>
还有一个带有指令和 Controller 的简单模块:
angular
.module("test", [])
.controller("CatalogCtrl", ["$scope", "$parse", "$location", "$q", function ($scope, $parse, $location, $q) {
var catalog = this,
listener = function () {
var query = {},
params = $location.search();
try
{
query = $parse($scope.query)();
}
catch (exception)
{
console.error(exception);
}
if (_.isEmpty(query))
{
return;
}
$q
.all([
scroll({ top: 0 }),
Catalog.searchProducts(_.assign(query, params))
])
.then(function (response) {
catalog.model = response[1];
console.log(catalog.model, response[1]);
})
.catch(function () {
catalog.model = {};
})
.finally(function () {});
};
catalog.model = {test:""};
//$scope.listen("$locationChangeSuccess", listener);
}])
.directive("catalog", function () {
return {
controller: "CatalogCtrl as catalog",
scope: {
query: "@catalog"
},
restrict: "A",
replace: false
};
});
问题在于 {{query | json}} 也不是 {{catalog.model | json}} 在 View 中呈现，我不确定其原因是什么。这可能是我遗漏或做错的事情，但如果有人发现我的错误，我可以使用一些帮助:)
最佳答案
您的代码存在一些问题...
1.
您的指令已附加它的controlelr，并且您可以在其范围(查询、目录等)上放置一些值。然后，您尝试从指令外部的元素访问这些值(因此具有不同的范围，对query、catalog等一无所知。例如
<!-- Let's say somehow DIV#1 has scope $001 -->
<div id="1">
<!-- Somehow DIV#1.1 creates a new scope ($002) -->
<div id="1.1" some-directive>
<!-- DIV#1.1.1 will have access to scope $002 -->
<!-- (under certain cirsumstances) -->
<div id="1.1.1"></div>
</div>
<!-- DIV#1.2 (which is outside of DIV#1.1) -->
<!-- will have access to scope $001 (but not $002) -->
<div id="1.2"></div>
</div>
2.
为了使事情变得更加复杂，您的指令创建了一个隔离范围，这意味着它所具有的任何内容都不会看到您的指令的范围，而是其父范围。 IE。在上面的示例中，DIV#1.1.1 将有权访问范围 $001，而不是 $002。
您可以对此采取什么措施(这基本上意味着，明确声明您的指令的内容应包含(嵌入)到其模板中。这使您可以更好地控制正在发生的事情，并允许您将指令的内容绑定(bind)到您想要的范围(即您的指令的隔离范围)。
<小时/>生成的代码应如下所示:
<div data-pj-catalog="{ 'type': 'Category1', 'key': '252' }">
...
<div class="col-12">
...
<span class="text-danger">{{query | json}}</span>
<span class="text-danger">{{catalog.model | json}}</span>
...
<div>
</div>
.directive('pjCatalog', function () {
return {
restrict: 'A',
transclude: true,
template: '<div ng-transclude></div>',
controller: 'CatalogCtrl',
scope: {
query: '@pjCatalog'
},
link: function (scope, elem, attrs, ctrls, transFn) {
transFn(scope, function (cloned) {
elem.empty().append(cloned);
});
}
};
})
另请参阅此 short demo 。
<小时/><子>
注意:
这被认为是“高级”指令内容(因此它听起来(并且)比大多数指令内容复杂得多)并且仅在 rae 情况下才需要。
我非常确定有一种更简单的方法可以通过稍加修改来实现您想要的目标(例如使用非隔离范围)(但我不确定您想要什么以便进一步提供帮助。
关于javascript - View 不更新范围或 Controller 属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24604292/